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
1 | $('#auto').fadeOut('slow').load('load.php').fadeIn('slow'); |
Without fadeOut and fadeIn effects
1 | $('#auto').load('load.php'); |
HTML Page with DIVs
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <title>Auto-Refresh DIV</title> </head> <body> <div id="one">One</div> <div id="auto"></div> <div id="three">Three</div> <script type="text/javascript" src="jquery-1.9.0.min.js"></script> <script type="text/javascript" src="my_script.js"></script> </body> </html> |
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
1 | Apple Inc |
jQuery Code
myScript.js
1 2 3 4 5 6 7 8 9 10 11 12 | $(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
[youtube https://www.youtube.com/watch?v=Ga3pOn7wXBA]
Output
Apple Inc
This will be useful for reloading a form or fetching fresh data from database.
Nice tutorial, works great.
Thank you so much for this Satish! This is exactly what I was looking for!
Regards,
David from Iceland
Thank you very much Satish!!! Looking for this more than a week and you exactly match my needs. You are a hero and made my day ;-)
Nice one..!!
Thank you so Much :)