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

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]

YouTube Link: https://www.youtube.com/watch?v=Ga3pOn7wXBA [Watch the Video In Full Screen.]



Output
Apple Inc

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

4 thoughts on “Auto-Refresh DIV using jQuery”

  1. 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 ;-)

Leave a Reply

Your email address will not be published. Required fields are marked *