These forums are currently read-only due to receiving more spam than actual discussion. Sorry.

It is currently Sat Dec 02, 2017 4:13 pm Advanced search

jquery + json generate html buttons with condition

If you are stuck or have questions regarding HTML or other Web technologies, ask your questions here. No question too dumb!

jquery + json generate html buttons with condition

Postby marchello » Sun Nov 18, 2012 9:15 pm

Hi all,

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)

Code: Select all
{
    "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:
Code: Select all
<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>
marchello
<h6>
 
Posts: 1
Joined: Sat Nov 17, 2012 1:28 pm

Re: jquery + json generate html buttons with condition

Postby zcorpan » Mon Nov 19, 2012 2:24 pm

Can you put your code online?
zcorpan
<article>
 
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden


Return to Help & Advice

Who is online

Users browsing this forum: No registered users and 0 guests