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!

Schrijf je in op onze nieuwsbrief

Altijd al willen weten waar we ons allemaal mee bezig houden doorheen het jaar? Schrijf je dan nu in voor onze nieuwsbrief en krijg al ons nieuws, vers van de pers.

Style elements blue