Ajax problem

lungdart · Sep 9, 2005

I'm making a script to time my breaks at work via web page.
I'm using the "Roll your own ajax" script (google that query to know what im talking about). the timer counts down from cTime which is set in the address bar as a get. the ajax script is supposed to load the page with different cTime variables for different break lengths.

The timer works great by itself, but when loaded in Ajax, it does not work at all. Any known issues with the script im using to load Ajax with? or can Ajax loaded web pages not use Javascript in them?

Also i tried passing a cTime argument to the ajax loading page, but didn't work either (in case it was reading it from the wrong url)

Any suggestions?

Lrnmore · Sep 9, 2005

lungdart,

Hard to say what the problem is without seeing the code that is misbehaving.

Here are some references and an example that might help:

PHP on the Fly
Jibbering

getTime.html

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title></title>
<script type="text/javascript">
var xmlhttp
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
  try {
  xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
  try {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
   xmlhttp=false;
  }
 }
@else
 xmlhttp=false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
 try {
  xmlhttp = new XMLHttpRequest();
 } catch (e) {
  xmlhttp=false
 }
}

function gTime(form) {
var field = form.elements['tf'];
url="getTime.php";
  xmlhttp.open("GET","server2.php",true);
  xmlhttp.onreadystatechange=function() {
   if (xmlhttp.readyState==4) {
    field.value = xmlhttp.responseText;
   }
  }
 xmlhttp.setRequestHeader('Accept','message/x-formresult');
 xmlhttp.send(null);
 return false;
}
</script>  
</head>
<body>
<form name="f1" onsubmit="return gTime(this)">
<input type="submit" value="Get Time">
<input type="text" size="25" name="tf">
</form>

</body>
</html>

server2.php

Code:

<?php
$now = date("F j, Y, g:i a");

echo $now;
?>

What are you using server side?

Thanks,
--Mark

lungdart · Sep 9, 2005

Heres the timer with some server side:

Code:

<html>
<head>
<title>Clock</title>

<style type="text/css">

.green { color: #00bb00; text-decoration: none; }
.red { color: #ff0000; text-decoration: none; }

#Clock {
	height: 45px;
	width: 45px;
	margin: 0px;
	padding: 0px;
	margin-left: 100px;
}
.button {
	background: #FFFECD;
	border: 1px solid #FFE65C;
	color: #000000;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 2px;
}
#wrap {
	width: 150px;
	height: 100px;
	background: #FFFFEA;
	border: 1px solid #ABAB65;
	padding: 0px;
	margin: 0px;
}
</style>

<script language="JavaScript" type="text/javascript">
<!--

/* simpleFindObj, by Andrew Shearer

Efficiently finds an object by name/id, using whichever of the IE,
classic Netscape, or Netscape 6/W3C DOM methods is available.
The optional inLayer argument helps Netscape 4 find objects in
the named layer or floating DIV. */

function simpleFindObj(name, inLayer) {
	return document[name] || (document.all && document.all[name])
		|| (document.getElementById && document.getElementById(name))
		|| (document.layers && inLayer && document.layers[inLayer].document[name]);
}

/* Set the Ctime to the desired amount */
cTime = <?php echo $_GET['cTime']; ?> + 1000;
clockRun = 1;

/* Sets clock to update in one second */
function clockUpdate(stop) {
	if (stop) {
		cTime = <?php echo $_GET['cTime']; ?>;
		clockRun = "0";
	}
	if (clockRun == "1") {
		cTime = null ? <?php echo $_GET['cTime']; ?> : cTime;
		clockSubtract(cTime)
		setTimeout("clockUpdate()",1000);
	}
}

/* Subtracts 1000 microseconds from the last time, and translates into how many minutes/seconds */
function clockSubtract(inMicro) {
	cTime = inMicro - 1000;
	if (cTime >= 0) { 
		inMinutes = Math.floor(cTime / 60000);
		inSeconds = (cTime % 60000) / 1000;
		clockColor('Clock', 'green')
	}
	if (cTime < 0) {
		inMinutes = Math.ceil(cTime / 60000);
		inSeconds = (cTime % 60000) / -1000;
		nTime = 1;
		clockColor('Clock', 'red')
	}
	clockDisplay(inMinutes, inSeconds);
}

/* Set the display of the readout */
function clockReadout(inMinutes, inSeconds) {
	if (cTime > 0) { return inMinutes + (inSeconds < 10 ? ":0" : ":") + inSeconds; }
	if (cTime == 0) { return "0:00"; }
	if (cTime < 0 && inMinutes == 0) { return "-" + inMinutes + (inSeconds < 10 ? ":0" : ":") + inSeconds; }
	if (inMinutes < 0) { return inMinutes + (inSeconds < 10 ? ":0" : ":") + inSeconds; }
}

/* Function to be called to update clock */
function clockDisplay(inMinutes, inSeconds) {
	clockWrite("Clock", clockReadout(inMinutes, inSeconds));
}

/* Function that actually writes to the clock */
function clockWrite (divName, newValue) {
	var divObject = simpleFindObj(divName);
	newValue = '<h2>' + newValue + '<' + '/h2>';
	if (divObject && divObject.innerHTML) {
		divObject.innerHTML = newValue;
	}
	else if (divObject && divObject.document) {
		divObject.document.writeln(newValue);
		divObject.document.close();
	}
}


/* Function that changes the colour of the timer if its in the negative */
function clockColor(clockId, newClass) {
	identity=document.getElementById(clockId);
	identity.className=newClass;
}
//-->
</script>

</head>

<body bgcolor="#FFFFFF">
<div id="wrap">

<center>
<div class="green" id="Clock" style=" <?php echo $style ?> ">
<h2>0:00</h2>
</div>


<FORM Name="Form1" ACTION="">
<INPUT TYPE="BUTTON" VALUE="Start" NAME="start" OnClick="clockUpdate()" class="button">
<INPUT TYPE="BUTTON" VALUE="Stop" NAME="stop" OnClick="clockUpdate(stop)" class="button">
</FORM>
</center>

</div>
</body>

</html>

And heres the Ajax script that loads it

Code:

<html>

<head>
<title>Ajax</title>
<SCRIPT LANGUAGE="JavaScript" SRC="js/ajax.js">
</SCRIPT>
<style type="text/css">

#popup {
	position: absolute;
	top: 40px;
	width: 150px;
	height: 100px;
	background: #ffffff;
}

.button {
	background: #FFFECD;
	border: 1px solid #FFE65C;
	color: #000000;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 2px;
}
</style>
</head>

<body>
<FORM Name="Form1" ACTION="">
<INPUT TYPE="BUTTON" VALUE="Break" NAME="Timer" OnClick="getMyHTML('timer.php?cTime=900000','popup')" class="button">
<INPUT TYPE="BUTTON" VALUE="Lunch" NAME="Timer2" OnClick="getMyHTML('timer.php?cTime=1800000','popup')" class="button">
</FORM>

<div id="popup">
</div>

</body>

</html>

Code:

/* Roll your own AJAX - A fork of Skeltoac's AJAX



Andy Skelton (skeltoac@gmail.com)

[URL unfurl="true"]http://www.skeltoac.com[/URL]



*/



var ajax=false;

/*@cc_on @*/

/*@if (@_jscript_version >= 5)



try {

	ajax = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

	try {

		ajax = new ActiveXObject("Microsoft.XMLHTTP");

	} catch (E) {

		ajax = false;

	}

}

@end @*/



if (!ajax && typeof XMLHttpRequest!='undefined') {

	ajax = new XMLHttpRequest();

}

function getMyHTML(serverPage, objID) {

	/* if((serverPage.indexOf("[URL unfurl="true"]http://localhost/")!=0))[/URL] return; */

    

     

	var obj = document.getElementById(objID);

	ajax.open("GET", serverPage);

	ajax.onreadystatechange = function() {

		if (ajax.readyState == 4 && ajax.status == 200) {

			obj.innerHTML = ajax.responseText;

		}

	}

	ajax.send(null);

	obj.innerHTML = "Fetching your data.. While you wait, have a cookie.";

}

lungdart · Sep 9, 2005

Update: I installed the firefox webdeveloper tool, and it gives the javascript error: "clockUpdate is not defined"

So I guess that its not seeing the Javascript in the page im loading with the Ajax script. Ill try putting the java in the ajax page and see what happens.

lungdart · Sep 9, 2005

Putting the script on the ajax.php file works. But the whole point of it was to use an Ajac script to load with the cTime variable (as its different for each use), but putting the JS in the ajax.php file completely negates the use for Ajax. Anyway around this?

Lrnmore · Sep 10, 2005

In this example the process goes like this:
1) tktps.html loads (includes external scripts)
2) user hits one of the buttons
3) request sent to server (ajax goes to work)
4) the script takes the response and sets the variable value and then starts the "clockUpdate()"

tktps.html

Code:

<html>

<head>
<title>Ajax</title>
<style type="text/css">

.green { color: #00bb00; text-decoration: none; }
.red { color: #ff0000; text-decoration: none; }

#Clock {
    height: 45px;
    width: 45px;
    margin: 0px;
    padding: 0px;
    margin-left: 100px;
}
.button {
    background: #FFFECD;
    border: 1px solid #FFE65C;
    color: #000000;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 2px;
}
#wrap {
    width: 150px;
    height: 100px;
    background: #FFFFEA;
    border: 1px solid #ABAB65;
    padding: 0px;
    margin: 0px;
}
</style>

<script type="text/javascript" SRC="js/ajax.js"></script>
<script type="text/javascript">
<!--

/* simpleFindObj, by Andrew Shearer

Efficiently finds an object by name/id, using whichever of the IE,
classic Netscape, or Netscape 6/W3C DOM methods is available.
The optional inLayer argument helps Netscape 4 find objects in
the named layer or floating DIV. */

function simpleFindObj(name, inLayer) {
    return document[name] || (document.all && document.all[name])
        || (document.getElementById && document.getElementById(name))
        || (document.layers && inLayer && document.layers[inLayer].document[name]);
}

/* Set the Ctime to the desired amount */
var start_cTime;
var clockRun = 1;
var cTime = false;

/* Sets clock to update in one second */
function clockUpdate(stop) {
    if (stop) {
        cTime = start_cTime;
        clockRun = 0;
    }
    if (clockRun == 1) {
        (!cTime)? cTime = start_cTime : cTime;
        clockSubtract(cTime)
        setTimeout("clockUpdate()",1000);
    }
}

/* Subtracts 1000 microseconds from the last time, and translates into how many minutes/seconds */
function clockSubtract(inMicro) {
    cTime = inMicro - 1000;
    if (cTime >= 0) {
        inMinutes = Math.floor(cTime / 60000);
        inSeconds = (cTime % 60000) / 1000;
        clockColor('Clock', 'green')
    }
    if (cTime < 0) {
        inMinutes = Math.ceil(cTime / 60000);
        inSeconds = (cTime % 60000) / -1000;
        nTime = 1;
        clockColor('Clock', 'red')
    }
    clockDisplay(inMinutes, inSeconds);
}

/* Set the display of the readout */
function clockReadout(inMinutes, inSeconds) {
    if (cTime > 0) { return inMinutes + (inSeconds < 10 ? ":0" : ":") + inSeconds; }
    if (cTime == 0) { return "0:00"; }
    if (cTime < 0 && inMinutes == 0) { return "-" + inMinutes + (inSeconds < 10 ? ":0" : ":") + inSeconds; }
    if (inMinutes < 0) { return inMinutes + (inSeconds < 10 ? ":0" : ":") + inSeconds; }
}

/* Function to be called to update clock */
function clockDisplay(inMinutes, inSeconds) {
    clockWrite("Clock", clockReadout(inMinutes, inSeconds));
}

/* Function that actually writes to the clock */
function clockWrite (divName, newValue) {
    var divObject = simpleFindObj(divName);
    newValue = '<h2>' + newValue + '<' + '/h2>';
    if (divObject && divObject.innerHTML) {
        divObject.innerHTML = newValue;
    }
    else if (divObject && divObject.document) {
        divObject.document.writeln(newValue);
        divObject.document.close();
    }
}


/* Function that changes the colour of the timer if its in the negative */
function clockColor(clockId, newClass) {
    identity=document.getElementById(clockId);
    identity.className=newClass;
}
//-->
</script>

</head>

<body>
<div id="wrap">
<FORM Name="Form1" ACTION="">
     <center>
     <div class="green" id="Clock" style="">
     <h2>0:00</h2>
     </div>
     <INPUT TYPE="BUTTON" VALUE="Stop" ID="stop" NAME="stop" OnClick="clockUpdate(stop)" class="button">
     </center>
</div>     
<INPUT TYPE="BUTTON" VALUE="Break" NAME="Timer" OnClick="getMyHTML('timer.php?t=0','popup')" class="button">
<INPUT TYPE="BUTTON" VALUE="Lunch" NAME="Timer2" OnClick="getMyHTML('timer.php?t=1','popup')" class="button">
<INPUT TYPE="BUTTON" VALUE="Vacation" NAME="Timer3" OnClick="getMyHTML('timer.php?t=2','popup')" class="button">
</FORM>

<div id="popup">
</div>

</body>

</html>

ajax.js

Code:

/* Roll your own AJAX - A fork of Skeltoac's AJAX

Andy Skelton (skeltoac@gmail.com)

[URL unfurl="true"]http://www.skeltoac.com[/URL]

*/

var ajax=false;

/*@cc_on @*/

/*@if (@_jscript_version >= 5)

try {
    ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
    try {
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
        ajax = false;
    }
}
@end @*/

if (!ajax && typeof XMLHttpRequest!='undefined') {
    ajax = new XMLHttpRequest();
}

function getMyHTML(serverPage, objID) {
    var obj = document.getElementById(objID);
    //alert(cTime);
    obj.innerHTML = "Fetching your data.. While you wait, have a cookie.";
    ajax.open("GET", serverPage);
    ajax.onreadystatechange = function() {
        if (ajax.readyState == 4 && ajax.status == 200) {
            //alert(ajax.responseText);
            start_cTime = parseInt(ajax.responseText, 10);
            clockUpdate();
            obj.innerHTML = "";
        }
    }
    ajax.send(null);
}

timer.php

Code:

<?php

$phpTime = array(900000, 1800000, 604800000);

echo $phpTime[intval($_GET['t'])]; 

?>

Make sure your source path is correct for the external script.

Thanks,
--Mark

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Ajax problem

lungdart

Programmer

Lrnmore

Technical User

lungdart

Programmer

lungdart

Programmer

lungdart

Programmer

Lrnmore

Technical User

Similar threads

Part and Inventory Search

Sponsor