locked
jquery + json generate html buttons with condition RRS feed

  • Question

  • My need is to generate buttons with conditions described in json. Help me please, I’m newbie and I'm stuck. The problem is that my code generates buttons with text "undefined" and nothing happens on button click.

    Here is my json code (it is valid due to check result at http://www.jsoneditoronline.org/ , but does not work with html code below)

        {
            "Caption": "Module caption",
            "IconsDirectory": "C://Images/",
            "Buttons": [
                {
                    "Conditions": [
                        {
                            "ConditionText": "1 == 1",
                            "ButtonText": "Text1",
                            "Visible": true,
                            "Colors": {
                                "FontColor": "#FFFFFF",
                                "BGColor": "#669933"
                            },
                            "BButtonText": {
                                "TText": "Textt1"
                                },
                            "Size": {
                                "Width": 200,
                                "Height": 50
                            },
                            "Icon": {
                                "FileName": "Smile.png",
                                "Width": 16,
                                "Height": 16
                            },
                            "Url": {
                                "UrlAddress": "http://www.google.com",
                                "OpenNewWindow": true
                            },
                            "JavaScriptAction": {
                                "Text": "alert('ok');"
                            }
                        },
                        {
                            "ConditionText": "2 == 2",
                            "ButtonText": "Text2",
                            "Visible": true,
                            "Colors": {
                                "FontColor": "#0FFFFF",
                                "BGColor": "#FF9966"
                            },
                            "BButtonText": {
                                "TText": "Textt1"
                                },
                            "Size": {
                                "Width": 200,
                                "Height": 50
                            },
                            "Icon": {
                                "FileName": "Smile.png",
                                "Width": 16,
                                "Height": 16
                            },
                            "Url": {
                                "UrlAddress": "http://www.google.com",
                                "OpenNewWindow": true
                            },
                            "JavaScriptAction": {
                                "Text": "alert('ok');"
                            }
                        }
                    ]
                }
            ]
        }

    html code:

        <html>
        <head>
        <title>SMButtons</title>
        <script src="jquery/jquery-1.4.2.js"></script>
        <script type="text/javascript">         
        //When document loaded.
        $(document).ready(function(){   
        // Get data from file as JSON
                    $.getJSON('weekendtask.json', function(data) {
                //var buttons = data.Buttons;
                   //$.each(buttons, function(key, val)
                   //{  
                    //$('<li><input type="button" onClick="'+         val.Conditions[0].JavaScriptAction +'" value="'+ val.Conditions[0].ButtonText +'"/>        </li>').appendTo('#ulObj');
                    //$('<li><input type="button" value="'+         val.Conditions[1].BButtonText.TText +'"/></li>').appendTo('#ulObj');
        var res=""
        $.each(data.Buttons, function(key, button){
            $.each(button.Conditions,function(key,condition){
            //  console.log(condition)
                res+="<li>"
                res+='<input type="button"' + 
                    //'" value="'+ '"Ttt"' +
                    '" value="'+ condition.ButtonText +
                    //'" value="'+ data.Buttons.Conditions.ButtonText +
                    '" onclick="' + condition.JavascriptAction +
                    '" style="background-color:'+condition.Colors.BGColor+'         color:'+condition.Colors.FontColor+
                    '"/>'
                res+="<\/li><\/br><\/br>test<\/br>"
            })
        })
        $(res).appendTo('#ulObj')
    
                   //});
           });             
             });
    
        window.onload = function(){ alert("welcome"); }
    
           </script>
        </head>
        <body bgcolor="silver">
        <br>
        <br>
        <div>
        <ul id='ulObj'>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        </ul>
        </div>
        </body>
        </html>



    Sunday, November 18, 2012 10:21 PM

All replies

  • You need to correct your JSON to read ButtonText instead of BButtonText as shown above OR ensure that your value=conditions[0].BButtonText.

    Just check the syntax over here and you should be good to go.


    Piyush T

    Monday, January 7, 2013 9:34 PM