Question

I want to upgrade a specific page element every minute.

I know how to use the jquery load() function to reload a element on my page like this.

    $('.mostliked').load("http://mypage.com" + " .mostliked >*", function() {
        //callback
    });

That works fine because .mostliked is an element in my sidebar.

However now I need to update a element where I can not grab it’s content from some other page like in my sidebar example.

var reload = 60000;
setInterval(function() {

    $('ul.rating').each(function() {
        //simply reload this element every minute
    })
    //update sidebar widget
    $('.mostliked').load("http://mypage.com" + " .mostliked >*", function() {
        //callback
    });

}, reload);

How can I solve that problem?

Answer 1

Check under the heading “Loading Page Fragments” on this page: http://api.jquery.com/load/

In order to “reload” the ul.rating elements, you will need to fetch the current page in the background (using load or another method), and capture its ul.rating elements and replace them in the page that javascript is running on.

Note: This isn’t the best way to do this, it would be much better if you could have some server size code return just the content you need for the ul.rating elements, instead of issuing an entire page request are parsing out the parts you need.