[RESOLVED] How to modify script to automaticlly update clock.php using setInterval()

dater59S

I have a file the displays servertime and local time
I want to change it from clicking the button to use setInterval() to automatically update the clock.
and to timeout in 2 minutes.

Where do I put it at ? html, ajax file or clock.php file?

clock.php

<?php echo date('H:i:s'); ?>

hour16_6.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Clock</title>
<style>
	#clock { font: 32px normal verdana, helvetica, sans-serif; }
</style>
<script src="ajax2.js"></script>
<script>
	window.onload = function() {
		document.getElementById("btn1").onclick = callAjax;
	}
	</script>
</head>

<body>
	<input id="btn1" type="button" value="Get Time" /><br />
    <div id="clock"></div>
</body>
</html>

ajax2.js

function getXMLHttpRequest() {
	try {
		try {
			return new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(e) {
			return new ActiveXObject("Msxml2.XMLHTTP");
		}
	}
	catch(e) {
		return new XMLHttpRequest();
	}
}
function callAjax() {
	var url = "clock.php";
	var myRandom = parseInt(Math.random()*99999999);
	myRequest.open("GET", url + "?rand=" + myRandom, true);
	myRequest.onreadystatechange = responseAjax;
	myRequest.send(null);
}
function responseAjax() {
    if(myRequest.readyState == 4) {
        if(myRequest.status == 200) {
			var now = new Date();
			var localTime = now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
			var serverTime = myRequest.responseText;
            document.getElementById("clock").innerHTML = "Server: " + serverTime + "<br />Local: " + localTime; 
        } else {
            alert("An error has occurred: " + myRequest.statusText);
        }
    }
}
var myRequest = getXMLHttpRequest();

dater59S

you need to have a local server to see it work.
or you can go here
http://debbiet.x10.mx/hour16_6.html

bradgrafelman

Thread moved to ClientSide Technologies forum (since this appears to have nothing to do with PHP).

In the future, you might want to post small code snippets that contain only the relevant code. You'll be more likely to get responses that way rather than expecting us to download and examine three separate files only to realize a small part of only one of them is actually relevant. In fact, there wasn't any reason to obscure the code behind attachments anyway, so I've removed the three attachments and move the code to the body of your post.

As for your question... what have you tried? Unless I'm misunderstanding your question, the obvious solution is to change the Javascript code in your HTML document to utilize setInterval() to call callAjax rather than assigning it to the onclick handler of the button.

dater59S

I am new to programming and I am not sure how to add it in and where ? setInterval and what to delete?

johanafm

The browser sends a request to the server, and the server responds with its current time. You want to change from click-initiated to update at set intervals. That means all changes will be in the browser. More specifically, do not add a click handler for your button and instead call window.setInterval.