CODEWITHSUNDEEP
javascriptjqueryhtmlcssdynamic
Loretta V
Loretta V

Reputation: 71

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 the 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>&nbsp;&nbsp;&nbsp;</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 a 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 and displays JSON data. I have added a pop up but the problem is i need different pop-up window for each table. For ex: For the first table i want popup 1, second table should display popup 2. Since these tables are dynamically created i don't know how to add different popup's to it. Any solution to this would be appreciated. Thanks in advance

Upvotes: 1

Views: 1785

Answers (1)

Tech Savant
Tech Savant

Reputation: 3766

You can assign unique ID's to the table like this.

<!--To display JSON data in the 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>&nbsp;&nbsp;&nbsp;</table>"
                             $("#entrydata").append($table)
                         });

                     });
                 });

Upvotes: 1

Related Questions