Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question button click using JSON

    Hi all,

    I'm new to JSON, trying to generate list of buttons.

    My need is to generate buttons using JSON array. It works fine for buttons text, but not for opening url. Could you please help me?

    Here is my JSON code:
    Code:
    {
    	"Caption": "Module caption",
    	"Buttons":
    	[
    		{"Text":"google", "Url": "window.open('http://www.google.com/')"},
    		{"Text":"yahoo", "Url": "window.open('http://www.yahoo.com/')"},
    		{"Text":"microsoft", "Url": "window.open('http://www.microsoft.com/')"},
    		{"Text":"facebook", "Url": "window.open('http://www.facebook.com/')"}
    	]
    }
    My html code:
    Code:
    <html>
    	<head>
    		<title>SMButtons</title>
    		<script src="JQuery/jquery-1.8.2.min.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;
    			     	// 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');
    					});
    
    			    });			    			   
     			});
    	    </script>
    	</head>
    	<body>
    		<ul id='ulObj'></ul>
    
    		<ul id='aaa'>
    			<li>1</li>
    			<li>2</li>
    		</ul>
    
    	</body>
    </html>

  • #2
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    This issue is resolved.

    JSON code:
    Code:
    {
     "Caption": "Module caption",
     "Buttons":
     [
      {"Text":"google", "Url": "window.open(\"http://www.google.com/\")"},
      {"Text":"yahoo", "Url": "window.open(\"http://www.yahoo.com/\")"},
      {"Text":"microsoft", "Url": "window.open(\"http://www.microsoft.com/\")"},
      {"Text":"facebook", "Url": "window.open(\"http://www.facebook.com/\")"}
     ]
    }
    html code:
    Code:
    <html>
     <head>
      <title>SMButtons</title>
      <script src="JQuery/jquery-1.8.2.min.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;
             // 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');
         });
    
            });             
        });
         </script>
     </head>
     <body>
      <ul id='ulObj'></ul>
    
       <ul id='aaa'>
       <li>1</li>
       <li>2</li>
      </ul>
    
      </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •