Home

Partial page refresh with AJAX and JQuery

Tuesday, March 17th, 2009 | Author: FoX

From time to time I need some kind of mechanism to continuously refresh a web page in order to provide a real-time dashboard of some kind. It would be great if I only could refresh a part of a specific page, for example: the traffic lights on a dashboard that indicate the status of the system.

It is really easy to only refresh a part of the page by using the JQuery JavaScript library. Once we’ve included the JQuery library into our page, we only need 1 line of JavaScript to get it working:

<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>

So we just place this little JS code snippet into our page to refresh everything inside the tag with the content id, let’s say every 5 seconds:

setInterval(function() {
    $("#content").load(location.href+" #content>*","");
}, 5000);

That’s it!! It is thus fairly easy to accomplish some real-time monitoring behavior with just that line of code. No more weird meta-refresh tags or iframe kind of workarounds in your web applications.

Every 5 seconds, we will refresh the content of the element with the content of the same URL and all elements that reside under the element with id: content.

Quite nice, don’t you think? JQuery certainly allows you to apply some very powerful techniques in just a few lines of code. I like it.. a lot!

Tags » «

Trackback: Trackback-URL | Comments Feed: RSS 2.0
Category: Development

Comments and pings are currently closed.

8 Responses

  1. 1
    nqkoisi 
    Wednesday, 1. April 2009

    Can’t work for me. Where i was wrong ?

    setInterval(function() {
    $(“#test”).load(location.href+” #test>*”,”");
    }, 1000);

    NameR0
    Status$getr0status[0]

  2. 2
    Siraj 
    Thursday, 2. April 2009

    the folowing is executable but it’s hide the DIV with id=”content” not refreshing it.
    please if there any modification will be appreciated

    window.onload = function(){ alert(“welcome”); }

    window.onload = function(){ alert(“welcome”); }

    $(document).ready(function(){

    setInterval(function() {
    $(“#content”).load(location.href+” #content>*”,”");}, “2000″);
    $(“#content”).show();

    });

  3. 3
    mravikrish 
    Saturday, 4. April 2009

    its not working without jquery-1.3.2.min.js where is this in the code could u suggest me

    thanks regards

  4. 4
    FoX 
    Saturday, 4. April 2009

    You need to make sure that there are tags inside your #content DIV, otherwise you need to change to selector to ” #content”.

    Please make sure that the setInterval code is inside the $(document).ready(function() {}-block or an $(function(){}-block.

    It is also possible to leave out the optional parameters like this: $("#content").load(location.href+" #content>*");

  5. 5
    Brad 
    Friday, 17. April 2009

    I’m having trouble getting this to work. Anyone get this to work? Please share your solution, thank you…

  6. 6
    qqk 
    Saturday, 18. April 2009

    This script only works with firefox on windows.
    Both IE and FF linux fail to do the partial refresh. I looking for solution to make it compatible with all browsers, let you know when I found one.
    So far I only got this:
    http://www.mail-archive.com/discuss@jquery.com/msg14741.html

  7. 7
    feruzz 
    Saturday, 2. May 2009

    This work for me in IE.
    var refresh = setInterval(function() {
    $(“#content”).load(location.href+”&t=”+1*new Date()+” #content>*”,”");
    }, 5000);

  8. 8
    Ray 
    Thursday, 28. May 2009

    How can I reload a asp.net list control with new values without having to reload the whole page?