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>