Page 1 of 2
Hoping to implement an AJAX timer
Posted: Thu Jan 18, 2007 5:29 am
by impulse()
I want to create a timer on a page using AJAX which expires every 5 seconds at which point AJAX runs and checks a MySQL DB for some results and displays them back to the page. The MySQL part is sorted, it's just the timer I'm having trouble with. Is this possible? If so could somebody give me some pointers please?
Regards,
Posted: Thu Jan 18, 2007 5:36 am
by Kieran Huggins
Javascript's setInterval() method is what you're looking for. Not to be confused with the similar (and more popular) setTimeout().
Incidentally, jquery might be of use to you. It has a decent ajax library.
Posted: Thu Jan 18, 2007 6:10 am
by impulse()
That was helpful, it made me realise I had windows.setTimeout instead of window.setTimeout
I'm still having problems with the AJAX though. I've created a PHP page that says "Hello, I'm PHP" which is the PHP tags and then the PHP tags close and the Javascript starts and I'm trying to get the script to run disTime.php after 5 seconds but I'm having no such luck. Can you see anything wrong with the following:
Code: Select all
<?php
echo "Hello, PHP here, expect the time to appear in 5 seconds.....<br><br>";
?>
Code: Select all
<script language="javascript" type="text/javascript">
function ajaxFunction(){
var ajaxRequest;
try{
ajaxRequest = new XMLHttpRequest();
} catch (e){
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
alert("Your browser doesnt support AJAX.");
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("disTime.php", true);
ajaxRequest.send(null);
}
window.setTimeout('ajaxFunction()', 5000);
</script>
Posted: Thu Jan 18, 2007 6:29 am
by Kieran Huggins

the mods are going to beat you senseless for your sloppy use of code tags!
Kieran Huggins wrote:Javascript's setInterval() method is what you're looking for. Not to be confused with the similar (and more popular) setTimeout().
Why not use jquery?:
Code: Select all
$('#ajaxDiv').load('disTime.php');
or:
Code: Select all
window.setInterval(function(){$('#ajaxDiv').load('disTime.php');},5000);
Posted: Thu Jan 18, 2007 6:51 am
by impulse()
or:
Javascript:
window.setInterval(function(){$('#ajaxDiv').load('disTime.php');},5000);
Is that a line of code that uses purely Javascript to display disTime.php after 5 seconds?
Posted: Thu Jan 18, 2007 7:06 am
by Kieran Huggins
it sets the innerHTML of the div #ajaxDiv to the output of disTime.php every 5 seconds.
On one line.
but you need to include
jquery
Posted: Thu Jan 18, 2007 7:08 am
by impulse()
Kieran Huggins wrote:it sets the innerHTML of the div #ajaxDiv to the output of disTime.php every 5 seconds.
On one line.
but you need to include
jquery
With the following line?:
Code: Select all
<script type="text/javascript" src="path/to/jquery.js"></script>
This causes Javascript not to run at all. I have a test line of code (
which doesn't run.
This code is in a .PHP file. Could that be causing problems? It has to be run in a PHP file.
Posted: Thu Jan 18, 2007 7:27 am
by Kieran Huggins
All the javascript should be in an HTML document. You can echo it from a php document INTO and html document.
You need to tell the the code to run on startup:
Code: Select all
$(function(){window.setInterval(function(){$('#ajaxDiv').load('disTime.php');},5000);});
will do just that.
try with a static file:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title> your awesome page </title>
<meta name="Generator" content="EditPlus" />
<meta name="Author" content="Kieran Huggins - http://kieran.ca" />
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">
$(function(){ // jquery onload
window.setInterval(function(){ // setInterval code
$('#ajaxDiv').load('disTime.php'); // jquery ajax load into div
},5000);
});
</script>
</head>
<body>
<div id="ajaxDiv"></div>
</body>
</html>
Works for me!
consult:
http://visualjquery.com/new.html
Posted: Thu Jan 18, 2007 8:09 am
by impulse()
Do you see it possible to do the following:
Have a PHP page (PHP page 1) which has an AJAX function within which calls another PHP page (PHP page 2) and output the results of PHP page 2 on PHP page 1. All of this has to be within an infinite loop on PHP page 1 which loops every 60 seconds?
Posted: Thu Jan 18, 2007 8:15 am
by CoderGoblin
XMLHttp tutorial (who's online example) may be useful for a browse. Tutorial created by Burrito
Posted: Thu Jan 18, 2007 8:37 am
by Kieran Huggins
I'm confused... what are you trying to do exactly?
Posted: Thu Jan 18, 2007 8:43 am
by impulse()
That kind of helped.
I'm so close to completing it at the moment. I have only been introduced to AJAX this morning and have an example AJAX function which calls a PHP script and retrieves some results from a MySQL DB and shows them on screen without having to refresh the browser. . This is good but AJAX only shows the details when it detects a _POST request. I have tried modding the script so it calls a different PHP script every 60 seconds but it's going nowhere. I have this code so far, could you kindly point out what is going wrong if you can see it.
Code: Select all
<script language="javascript" type="text/javascript">
function ajaxFunction(){
var ajaxRequest;
try{
ajaxRequest = new XMLHttpRequest();
} catch (e){
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
alert("Your browser doesnt support AJAX.");
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("disTime.php", true);
ajaxRequest.send(null);
}
window.setTimeout('ajaxFunction()', 5000);
# window.setTimeout('alert("5 seconds have passed")', 5000);
</script>
From what I can tell it's the ajaxFunction that's causing the problems as it's not running the disTime.php script. If I uncomment
Code: Select all
window.setTimeout('alert("5 seconds have passed")', 5000);
it works fine, the part I uncomment that is.
Posted: Thu Jan 18, 2007 8:49 am
by impulse()
I'm modding a CRM so it runs a PHP script every 60 seconds. The PHP it runs should check against a MySQL for a time stamp and display a message if that time stamp meets a certain criteria. A reminder function basically. If the time stamp minus the current time stamp is 0 then it will display a message.
But the CRM is wrote in PHP so that's why I need AJAX to run from a PHP script. It has to be AJAX so that people still get the message even if they're not refreshing pages.
Posted: Thu Jan 18, 2007 8:54 am
by Kieran Huggins
Have you tried the last code I posted? It seems perfect for your situation and it works (I tested it and everything).
Just modify the "path/to/jquery.js" and you can cut & paste it into place.
Posted: Thu Jan 18, 2007 8:58 am
by impulse()
Yes but it only displayed a blank page.
I create a file called test.htm and placed your code in there and modified the src path of JQuery to its correct path. disTime.php was in the same directory as the script aswell. And if I go straight to disTime.php it shows the current time.
http://ra.enta.net/steve/ajax/mysql/test/test.php
http://ra.enta.net/steve/ajax/mysql/test/test.htm aswell
That's the script location.