Loading content from html jQuery (many different divs)

Question

I have many divs

<div id="movies" rel="info.php?m=19923"></div>
<div id="movies" rel="info.php?m=98127"></div>
<div id="movies" rel="info.php?m=39423"></div>
<div id="movies" rel="info.php?m=32942"></div>
<div id="movies" rel="info.php?m=15454"></div>
<div id="movies" rel="info.php?m=143436"></div>

100+ divs

Can I somehow with jQuery and .load update each div to show its relatives files(info.php?m=XXXXX) info?

I found this function in this http://jasonlau.biz/home/jquery/screw-a-jquery-plugin

but i don't want the lazy effect. Just so its start loading from top.

Answer 1

Below is an example of how to do it using jQuery. It finds all elements with the class name movies and calls the jQuery get function which preforms an ajax request. The response from the request is available as the first parameter of the callback function (data in this example). Once you have the data you can use jQuery's html function to add it to the DOM element.

$(".movies").each(function(){ 
   // make a reference to the current div  
   var element = $(this);
   // get the url
   var url = element.attr('rel');
   // make ajax request
   $.get(url, function(data) {
      // append the data to the div
      element.html(data);
   });
})

Keep in mind that HTML ID's should be unique. In your example you had more than one div with the id movies. You can select elements by ID using $('#movies'), but it will return only the first element that matches the ID. If you have control over the HTML then each div should look more like this:

<div class="movies" rel="info.php?m=19923"></div>