Hoping to implement an AJAX timer
Moderator: General Moderators
-
impulse()
- Forum Regular
- Posts: 748
- Joined: Wed Aug 09, 2006 8:36 am
- Location: Staffordshire, UK
- Contact:
Hoping to implement an AJAX timer
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,
Regards,
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
-
impulse()
- Forum Regular
- Posts: 748
- Joined: Wed Aug 09, 2006 8:36 am
- Location: Staffordshire, UK
- Contact:
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:
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>
Last edited by impulse() on Thu Jan 18, 2007 6:37 am, edited 2 times in total.
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
Why not use jquery?:Kieran Huggins wrote:Javascript's setInterval() method is what you're looking for. Not to be confused with the similar (and more popular) setTimeout().
Code: Select all
$('#ajaxDiv').load('disTime.php');Code: Select all
window.setInterval(function(){$('#ajaxDiv').load('disTime.php');},5000);- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
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
On one line.
but you need to include jquery
-
impulse()
- Forum Regular
- Posts: 748
- Joined: Wed Aug 09, 2006 8:36 am
- Location: Staffordshire, UK
- Contact:
With the following line?: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
Code: Select all
<script type="text/javascript" src="path/to/jquery.js"></script>
Code: Select all
alert("hello");This code is in a .PHP file. Could that be causing problems? It has to be run in a PHP file.
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
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:
will do just that.
try with a static file:
Works for me!
consult: http://visualjquery.com/new.html
You need to tell the the code to run on startup:
Code: Select all
$(function(){window.setInterval(function(){$('#ajaxDiv').load('disTime.php');},5000);});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>
consult: http://visualjquery.com/new.html
- CoderGoblin
- DevNet Resident
- Posts: 1425
- Joined: Tue Mar 16, 2004 10:03 am
- Location: Aachen, Germany
XMLHttp tutorial (who's online example) may be useful for a browse. Tutorial created by Burrito
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
-
impulse()
- Forum Regular
- Posts: 748
- Joined: Wed Aug 09, 2006 8:36 am
- Location: Staffordshire, UK
- Contact:
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.
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 it works fine, the part I uncomment that is.
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>
Code: Select all
window.setTimeout('alert("5 seconds have passed")', 5000);-
impulse()
- Forum Regular
- Posts: 748
- Joined: Wed Aug 09, 2006 8:36 am
- Location: Staffordshire, UK
- Contact:
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.
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.
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
-
impulse()
- Forum Regular
- Posts: 748
- Joined: Wed Aug 09, 2006 8:36 am
- Location: Staffordshire, UK
- Contact:
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.
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.