Home/ Questions/Q 8847477
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T12:11:56+00:00

My need is to generate buttons with conditions described in json. Help me please,

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    onClick handler should be condition.JavaScriptAction.Text. Rest everything was working fine.

    var res = ""
    $.each(data.Buttons, function(key, button) {
        $.each(button.Conditions, function(key, condition) {
            res += "<li>"
            res += '<input type="button"' + '" value="' + condition.ButtonText + '" onclick="' + condition.JavaScriptAction.Text + '" style="background-color:' + condition.Colors.BGColor + '         color:' + condition.Colors.FontColor + '"/>'
            res += "<\/li><\/br><\/br>test<\/br>"
        })
    })
    $(res).appendTo('#ulObj')

    http://jsfiddle.net/x8Ysd/

    • 0