0 Replies Latest reply on Nov 17, 2012 5:09 AM by mmarrco

    jquery + json generate html buttons with condition

    mmarrco

      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) :

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

       

      <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) :

       

      {

          "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) :

       

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