Hoping to implement an AJAX timer

JavaScript and client side scripting.

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

Post 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,
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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.
impulse()
Forum Regular
Posts: 748
Joined: Wed Aug 09, 2006 8:36 am
Location: Staffordshire, UK
Contact:

Post 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>
Last edited by impulse() on Thu Jan 18, 2007 6:37 am, edited 2 times in total.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

8O 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);
impulse()
Forum Regular
Posts: 748
Joined: Wed Aug 09, 2006 8:36 am
Location: Staffordshire, UK
Contact:

Post 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?
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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
impulse()
Forum Regular
Posts: 748
Joined: Wed Aug 09, 2006 8:36 am
Location: Staffordshire, UK
Contact:

Post 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 (

Code: Select all

alert("hello");
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.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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
impulse()
Forum Regular
Posts: 748
Joined: Wed Aug 09, 2006 8:36 am
Location: Staffordshire, UK
Contact:

Post 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?
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

XMLHttp tutorial (who's online example) may be useful for a browse. Tutorial created by Burrito
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

I'm confused... what are you trying to do exactly?
impulse()
Forum Regular
Posts: 748
Joined: Wed Aug 09, 2006 8:36 am
Location: Staffordshire, UK
Contact:

Post 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.
impulse()
Forum Regular
Posts: 748
Joined: Wed Aug 09, 2006 8:36 am
Location: Staffordshire, UK
Contact:

Post 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.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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.
impulse()
Forum Regular
Posts: 748
Joined: Wed Aug 09, 2006 8:36 am
Location: Staffordshire, UK
Contact:

Post 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.
Post Reply