Jump to content

jquery + json generate html buttons with condition

marrco's Photo
Posted Nov 17 2012 05:24 AM
4622 Views

Hi all,

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


Here is my json code (it is valid, but does not work with html code below) :

Quote

{
"Caption": "Module caption",
"IconsDirectory": "C://Images/",
"Buttons": [
{
"Conditions": [
{
"ConditionText": "1 == 1",
"ButtonText": "Text1",
"Visible": true,
"Colors": {
"FontColor": "#FFFFFF",
"BGColor": "#00FF00"
},
"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": "#FFFFFF",
"BGColor": "#00FF00"
},
"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:

Quote

<html>
<head>
<title>SMButtons</title>
[removed][removed]
[removed]
//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" value="'+ val.ButtonText +'"/></li>').appendTo('#ulObj');
});
});
});
[removed]
</head>
<body>
<br>
<br>
<div>
<ul id='ulObj'>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>




Also I would like to show here my working code (generating html buttons from json without condition).

json code (it works) :

Quote

{
"Caption": "Module caption",
"IconsDirectory": "C://Images/",
"Buttons": [
{
"TText": "google",
"JavascriptAction": "alert('google')"
},
{
"TText": "microsoft",
"JavascriptAction": "alert('microsoft')"
},
{
"TText": "yahoo",
"JavascriptAction": "alert('yahoo')"
}
]
}



html code (it works) :

Quote

<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('Module.json', function(data) {
// Set json data from file to variable 'persons'
var buttons = data.Buttons;
var icondir = data.IconsDirectory;
// For each item of variable person append to ul list
$.each(buttons, function(key, val)
{
//$("<li><input type='button' onClick='"+ val.Url +"' value='"+ val.Text +"'/></li>").appendTo('#aaa');
//$("<li><input type='button' style='"+ val.Style +"' onClick='"+ val.Url +"' value='"+ val.Text +"'/></li>").appendTo('#aaa');
//$("<li><input type='button' value='"+ val.TText +"'/></li>").appendTo('#bbb');
//style="height: 25px; width: 100px"
//$('<li><input type="button" onClick="'+ val.action +'" value="'+ val.Text +'"/></li>').appendTo('#aaa');
$('<li><input type="button" onClick="'+ val.JavascriptAction +'" value="'+ val.TText +'"/></li>').appendTo('#ulObj');
});
//var knop = data.Knop;
// For each item of variable person append to ul list
//$.each(buttons, function(key, val)
//{
//$("<li><input type='button' onClick='"+ val.Url +"' value='"+ val.Text +"'/></li>").appendTo('#aaa');
//$("<li><input type='button' style='"+ val.Style +"' onClick='"+ val.Url +"' value='"+ val.Text +"'/></li>").appendTo('#bbb');
//style="height: 25px; width: 100px"
//$('<li><input type="button" onClick="'+ val.action +'" value="'+ val.Text +'"/></li>').appendTo('#aaa');
//$('<li><input type="button" onClick="'+ val.action +'" value="'+ val.Text +'"/></li>').appendTo('#aaa');
//});
});
});
</script>
</head>
<body>
<br>
<br>
<div>
<ul id='ulObj'>
<li>1</li>
</ul>
</div>
<br>
<div>
<ul id='aaa'>
<!--<li>1</li>-->
</ul>
</div>
<!--<button type="submit" style="height: 95px; width: 550px"> </button>-->
<!--background: url('img/submit_button.jpg'); background-position: center; background-repeat: no-repeat; background-color:Transparent;-->
<div>
<ul id='bbb'>
<!--<li><img src="img/submit_button.jpg"/></li>-->
<!--<li>Button caption</li>-->
</ul>
</div>
</body>
</html>


Tags:
0 Subscribe


2 Replies

0
  Rick001's Photo
Posted Nov 23 2012 06:25 PM

Hello Marrco... the short answer to your question is that I would use logic in your script based against values in your JSON/Buttons. JSON is not meant to hold logic - though you are doing so "successfully" (not really) only because its wrapped in quotes which makes it a string and not a conditional statement.

Replace your psuedo conditional statements with something meaningful to compare against in your script's logic. You could of course compare against the string "1==1" if you want to..... which would be:

if (object.conditional == '1==1'){
// do something
}

Which to be honest is way janky. Replace your conditional string with just a value, like "1", so you can do this instead:

Sample JSON: {conditional:1}

if (object.conditional == 1){
// do something
}

Also, you likely will be creating memory leaks with your inline events. Google event delegation and learn to use JQuery's live or bind methods.
0
  ella12's Photo
Posted Jul 31 2013 01:18 AM

We are a group of volunteers and opening a new scheme in our community. Your web site offered us with valuable info to
work on. You've done an impressive job and our whole community will be grateful to you.


blogger templates