CodeIgniter Forums
jquery + json generate html buttons with condition - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forum-20.html)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forum-23.html)
+--- Thread: jquery + json generate html buttons with condition (/thread-55928.html)



jquery + json generate html buttons with condition - El Forum - 11-17-2012

[eluser]Unknown[/eluser]
Hi all,

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


Here is my json code:

Code:
{
    "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:

Code:
<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>&lt;input type="button" value="'+ val.ButtonText +'"/&gt;&lt;/li>').appendTo('#ulObj');
           });
   });        
   });
   [removed]
&lt;/head&gt;
&lt;body&gt;
<br>
<br>
<div>
<ul id='ulObj'>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
&lt;/body&gt;
&lt;/html&gt;