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!

Register Log in
  • Congratulations Andrzejek on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Ajax problem

Status
Not open for further replies.
lungdart

lungdart

Programmer
Sep 8, 2005
4
CA
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?
 
Sort by date Sort by votes
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
 
Upvote 0 Downvote
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.";

}
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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?
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

amrmnabil
  • Locked
  • Question
React Problem
Replies
0
Views
162
amrmnabil
amrmnabil
waubain
  • Locked
  • Question
id tag not loading new data with new ajax call 1
Replies
4
Views
148
waubain
waubain
HansMaulwurf
  • Locked
  • Question
AJAX not working after database migration from MySQL to SQL Server ( Undefined index)
Replies
0
Views
105
HansMaulwurf
HansMaulwurf
bs6600
  • Locked
  • Question
Nested accordion problem
Replies
1
Views
121
bs6600
bs6600
Marine1969
  • Locked
  • Question
AJAX - first attempt
Replies
11
Views
176
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top