javascript - How to create popup's for dynamic tables -
html
function toggle_visibility(id) { var e = document.getelementbyid(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } //--> </script> <!--to display json data in tables--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script> $(function() { var dmjson = "data.json"; $.getjson( dmjson, function(data) { $.each(data.records, function(i, f) { var $table="<table class='mystyles' table border=5><tbody><tr>" + "<td>" + f.clue + "</td></tr>" + "<tr><td>" + f.answer + "</td></tr>" + "<tr><td>" + f.status + "</td></tr>" + "<tr><td> " + f.views + "</td></tr>" + "</tbody> </table>" $("#entrydata").append($table) }); }); }); <!--popup function--> $(function() { $( "#dialog" ).dialog(); }); </script> </head> <body> <div id="popup-box1" class="popup-position"> <div id="popup-wrapper"> <p style="text-align: right;"><a href="javascript:void(0)" onclick="toggle_visibility('popup-box1');">x</a></p> <div id="popup-container"> <h3>popup box 1</h3> <p>a popup box</p> </div><!-- popup container end --> <p style="text-align: right;"><a href="javascript:void(0)" >close popup box</a></p> </div><!-- popup wrapper popup end --> </div><!-- popup box 1 end --> <!--creating dynamic table--> <a href="javascript:void(0)" onclick="toggle_visibility('popup-box1');"> <div class="wrapper" > <div class="profile"> <div id='entrydata' > </div> </div> </a> </div>
the code creates tables dynamically , displays json data. have added pop problem need different pop-up window each table. ex: first table want popup 1, second table should display popup 2. since these tables dynamically created don't know how add different popup's it. solution appreciated. in advance
you can assign unique id's table this.
<!--to display json data in tables--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script> $(function() { var dmjson = "data.json"; $.getjson( dmjson, function(data) { var idx=1; $.each(data.records, function(i, f) { var myid = 'mytable'+string(idx); idx++; var $table="<table id='"+myid+"' class='mystyles' table border=5><tbody><tr>" + "<td>" + f.clue + "</td></tr>" + "<tr><td>" + f.answer + "</td></tr>" + "<tr><td>" + f.status + "</td></tr>" + "<tr><td> " + f.views + "</td></tr>" + "</tbody> </table>" $("#entrydata").append($table) }); }); });
Comments
Post a Comment