Google SEO | PHP | Mysql | Ajax | Jquery | Photoshop | Illustrator | Database | Web Design | Web Development | Sitemap |

Some cases we need to refresh a part of a web page in a specific interval of time. For e.g., Cricket score board, share market updates, online users etc.. In these places we need to refresh a part of web page without reloading the whole page.

Refresh a div at every 10 seconds
Click image to view Larger
By using Jquery, Ajax and PHP we can refresh a div and make that area of web page up to date. So that your web page will become more user friendly and more attractive.

Below I will explain how to do that. If you want you can view demo and download the example file below.

Download FileDemo

Create a HTML and Jquery Ajax call back page like below

$(document).ready(function(){
   var j = jQuery.noConflict();
	j(document).ready(function()
	{
		j(".refreshMe").everyTime(10000,function(i){
			j.ajax({
			  url: "refresh-me.php",
			  cache: false,
			  success: function(html){
				j(".refreshMe").html(html);
			  }
			})
		})
	});
   j('.refreshMe').css({color:"red"});
});

This will get Refreshed in 10 Seconds
Now you should include two Jquery file to sprinkler the Ajax at set time
<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript" src="js/jquery.timer-1.0.0.js"></script>
Below is the PHP to get current time. (In this case)
echo date('g:i s a');
Now upload file and run the script. For every 10 seconds the div will get refreshed and show the current time using PHP.

Top Λ

Comments (12)

  • Daniel

    Thanks a lot .. very helpful
    Monday-Feb-2014 | 10:20:44 PM
  • vanitha

    Nice.. Thank You
    Saturday-Dec-2013 | 05:52:28 PM
  • Ali

    It worked really nice but the part that gets refreshed blinks every 10 seconds due to the refresh process...do you have a solution to that? I am using Chrome
    Thanks for the great code
    Thursday-Oct-2013 | 12:11:26 PM
  • Razaractor

    Sorry for the language but damn this is some stuff, thanks a lot, first time here and the simplicity of the code is on point.
    Wednesday-Oct-2013 | 04:51:32 PM
  • Hashim Malindi SEO

    Nice!! Keep up the good work...I had to modify it to suit my need. You can check it on my site. THANKS
    Saturday-Sep-2013 | 02:32:09 PM
  • DupcantX

    Thanks very useful, smoothly with Firefox, Chrome and IE.
    Wednesday-Aug-2013 | 06:23:10 PM
  • Muhammad Al-Rahib Talal

    code is the perfect thanks the coder I
    Thursday-Jul-2013 | 05:15:25 AM
  • VipuL Srivastava

    Yes it worked nice. This is a nice code.
    Saturday-Jun-2013 | 01:01:39 PM
  • Abhimanyu Nigam

    Best code i ever used....
    Saturday-Apr-2013 | 05:54:03 PM
  • Muhammad Naveed

    Works Perfect. Nice work.
    Thursday-Apr-2013 | 08:50:37 PM
  • VipuL Srivastava

    Yes it worked nice .... this is a nice code
    Thursday-Oct-2012 |
  • VipuL Srivastava

    Yes it worked nice .... this is a nice code
    Thursday-Oct-2012 |

Post Comment

Name:
Email:
Divider