Jquery ajax loading method: only one query for multiple elements?

Question

Hey, I have 10 "ul.rating" elements on my page. I want to update these items every minute.

var reload = 60000; var currentpage = window.location; setInterval(function() { $('ul.ratings').load(currentpage + " .ul.ratings >*", function() { //callback }); }, reload); 

Now I have the following two problems.

• I need to find to reload each new element. Right now I'm probably reloading the SAME ul.ratings element for all the ul.ratings elements on my page. So there must be some way to use index () or some other jquery method to reload the first ul.ratings element with the first ul.ratings element and reload the fifth ul.ratings element with the fifth ul.ratings elment.

• All this is probably a pretty bad way to do this, but I think in my case there is no better way. Is it possible to execute the load-method only once and grab every ul.ratings element and replace the correct one? Right now I am making download calls if there are 10 ul.ratings elements on my page.

Thank you for your help!

Answer 1

Do you have control over the url you are calling? Can you return only the data you want to him? In this case, let it return JSON or XML and reload your ul with this information.

Otherwise, you can use the $ .get function, load the HTML into jquery and find ul yourself:

 var ulorigs = $('ul.ratings'); $.get('url', function (data) { var content = $(data); $('ul.ratings', content).each(function(ind,elem) { $(ulorigs.get(0)).html($(elem).html()); }); }); 

I myself did not run this code.

Answer 2

I do not have a page to try this on myself, but presumably:

 var reload = 60000; var currentpage = window.location; setInterval(function() { $('ul.ratings').each(function(i, el) { $(this).load(currentpage + " ul.ratings:eq(" + i + ") > li", function() { //callback }); }); }, reload); 

I think your main problem does not account for the WHICH ul targeting of the content you are replacing.

This is probably a pretty complicated idea because you end up talking about it ten times and loading the page asynchronously 10 times.

I believe this always means:

 $("body").load(currentpage + " body > *") 

;)