CODEWITHSUNDEEP
javascriptphpjquery
user2666864
user2666864

Reputation: 67

load data using jquery multiple div

I have the below jquery function to load data from database which works fine, however I would like to show that same data again over the same page, When I do that it doesn't work. it will only shows for the first one. could someone help me out?

     <script type="text/javascript">
  $(document).ready(function() {
    loadData();
});

var loadData = function() {
    $.ajax({    //create an ajax request to load_page.php
        type: "GET",
        url: "second.php",             
        dataType: "html",   //expect html to be returned                
        success: function(response){                    
            $("#responsecontainer").html(response);
            setTimeout(loadData, 1000); 
        }

    });
};
 </script>

 <div style='display:inline' id='responsecontainer'></div><!--only this one is displayed-->
 <div style='display:inline' id='responsecontainer'></div><!-- I want it to show me the same data here too-->

Upvotes: 0

Views: 250

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

ID of an element must be unique in a document, use class attribute to group similar elements

<div style='display:inline' class='responsecontainer'></div>
<div style='display:inline' class='responsecontainer'></div>

then use class selector

$(document).ready(function () {
    loadData();
});

var loadData = function () {
    $.ajax({ //create an ajax request to load_page.php
        type: "GET",
        url: "second.php",
        dataType: "html", //expect html to be returned                
        success: function (response) {
            $(".responsecontainer").html(response);
            setTimeout(loadData, 1000);
        }

    });
};

The ID selector will return only the first element with the given ID

Upvotes: 2

Related Questions