Partial page refresh with AJAX and JQuery

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!