Auto-Refresh DIV using jQuery

Video tutorial illustrates auto-loading / refreshing of particular div content, using jQuery.

For the purpose of illustration, we’re also adding fadeOut and fadeIn effects to it.
You can safely remove those effects!

With fadeOut and fadeIn effects

$('#auto').fadeOut('slow').load('load.php').fadeIn('slow');

Without fadeOut and fadeIn effects

$('#auto').load('load.php');

HTML Page with DIVs

One

Three

This HTML document contains 3 div’s.
First and third div’s has some content which remains constant since the page has been loaded.
DIV with an id auto, is refreshed for every 2000 millisecond and the content is being loaded from load.php file.

load.php

Apple Inc

jQuery Code
myScript.js

$(document).ready( function(){
$('#auto').load('load.php');
refresh();
});

function refresh()
{
 setTimeout( function() {
   $('#auto').fadeOut('slow').load('load.php').fadeIn('slow');
   refresh();
 }, 2000);
}

we have added fadeOut and fadeIn effects for the purpose of demonstration, you can remove it if you want.
2000 is the time for Timeout call, in milliseconds.

Auto-Refresh Specific HTML Section: using jQuery

Output
Apple Inc

This will be useful for reloading a form or fetching fresh data from database.