This section contains the detail about the Refresh Page Section at a given interval using jQuery plug in.
Refresh Page Section at a given interval using jQuery plug in
In this section, you will learn how to refresh a page section using jQuery Plug in.
Given below example example will give you a clear idea :
Example :
In this example, we will change the content of a div element using JQuery plug in after every 5 second. You can change the time duration of change. The change content is random number which is generated by a php file. Given below the code :
refreshElement.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Refresh page section at a given interval using jQuery plugin</title>
<script language="javascript" src="js/jquery-1.4.2.js"></script>
<script language="javascript" src="js/jquery.timers-1.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var j = jQuery.noConflict();
j(document).ready(function()
{
j(".refreshMe").everyTime(5000,function(i){
j.ajax({
url: "refreshElementMain.php",
cache: false,
success: function(html){
j(".refreshMe").html(html);
}
})
})
});
j('.refreshMe').css({color:"red"});
});
</script>
</head>
<body>
<div class="refreshMe"><b><i>This div element will refresh in everey 5 sec <br>
<font color='blue'>
This will be replaced by a randomly generated number after every 5 seconds.</font></b></i>
</div>
</body>
</html>
refreshElementMain.php
<? echo "<b><i><font color='blue'>The currently generated random number is :</font>".rand(); ?>
Output :
When page first loads , following content displayed :
After 5 seconds , it will display :
[ 0 ] Comments