How to call php from ajax in every second using Jquery

Posted on March 27, 2008
Filed Under ajax, javascript, jquery, php

Few days ago, Mike emailed me and asked me how can i call a server script( php file) from jQuery in every second.Since, there was no built-in mechanism for this in jQuery, I came up with this solution of displaying time of server using Ajax, PHP and jQuery.You can use setinterval() method avaiable in javaScript to accomplish this task using jQuery.

View Live Demo

HTML Code:

<div align="center" id="timeval">--:--:--</div>
<button id="stop">Stop</button>

There are mainly two elements one is “div” with id “timeval” which displays the the time and the other one is “button” with id “stop” to stop the calling the PHP file in the regular interval.

JavaScript Code:

<script src="jquery.js"></script>
<script>
$(document).ready(function()
{
   //ajaxTime.php is called every second to get time from server
   var refreshId = setInterval(function()
   {
     $('#timeval').load('ajaxTime.php?randval='+ Math.random());
   }, 1000);

   //stop the clock when this button is clicked
   $("#stop").click(function()
   {
     clearInterval(refreshId);
   });
});
</script>

As you can see above, setInterval() function is used to call the php file in every second, where 1000 means 1000 millisecond which equals to one second.And, the load() function of jQuery is used to call the Ajax. And, you might be wondering why I’ve passed “randval” to “ajaxTime.php”, you can read this post of mine about the problem of getting same value from ajax. And when the button with id “stop” is called the clearInterval() functions clears the interval ID generated by setInterval() and stop calling the PHP file at regular interval.

PHP code :

<?php
   echo date("g:i:s A");
?>

As you can see the php code in the ajaxTime.php is fairly simple, it just displays the current server time.

You can download the demo by clicking here

Popularity: 17% [?]

If you like this post then please subscribe to my full RSS feed . You can also subscribe by email and have new posts sent directly to your inbox.And, You can also follow me on twitter at http://twitter.com/roshanbh.

» Jquery : Benefits, Examples and Free Ebook
» jQuery is the most popular JavaScript and Ajax Framework
» Which is the best JavaScript and Ajax Framework ?
» check username availability in ajax and php using jquery’s fading effect

Comments

5 Responses to “How to call php from ajax in every second using Jquery”

akram on June 1st, 2008 4:38 pm

Hello,
How can i send another variable to ajaxtime.php.
i did change in first fanction like this:
var chatid=document.getElementById (usr);
{
$(’#chat’).load(’showmsg1.php?randval=’+ Math.random()+ ‘&u=’ + chatid);
}, 1000);

but it is not working now. can you help me to send another variable to ajaxtime.php?
Roshan on June 1st, 2008 6:44 pm

Doest it work with a single variable, I’ve a doubt with your function and furthermore have you included jquery framework in your project ??
medo on June 18th, 2008 1:56 am

Hi,
loved the post
but can you do the same thing only this time ajax should refresh the page only when a database row is added ?
as in chat
vsvnmurthy on July 2nd, 2008 7:09 am

The Post is very good..But Please guide how to send more than one element value from html form to php script using Ajax..

I tried by adding ( for checkbox ) the code below the line of ( xmlhttp.send(”txtname=” + txtname.value) in ajaxFunction()–>

xmlhttp.send(”gender=” + gender.value); //Posting gender to PHP File

and tried to print $b = $_POST['gender'];
echo $b;
its not working..

please guide ..
Thank you…
Roshan on July 2nd, 2008 8:44 am

Thr above example is done using jQuery and it seems that you’re doing it also in traditional way..You can get some idea how to use ajax with jQuery from here

http://docs.jquery.com/Ajax