Tag: div

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.