PDA

View Full Version : AJAX interaction


city_coder
04-14-2008, 11:18 AM
Hi guys, so i posted a thread here a couple of days ago about getting the id of a link that was clicked to a javascript function. that was answered in minutes. great :D

but i have another question or problem.

i have this img


<a href="#" onClick="ajaxFunction(this.id)" id="volcano"><img src="images/lines.jpg" /></a>


and this links to the typical ajax script that checks the browser and then sends the query.


function ajaxFunction(id) {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState==4) {
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = xmlHttp.responseText;
}
}

var queryString = "?type=" + id;
xmlHttp.open("GET", "ajax.php" + queryString, true);
xmlHttp.send(null);
}
</script>


so when i get to the ajax.php and try to print out the results of an sql query it doesnt seem to do so. I mean when i click on the link in my page it empties the ajaxDiv (cos i have something in there already, which i want to replace) but doesnt put anything in it. i cant even seem to get an echo to come out that is at the top of the ajax.php script....

any help please?
city_coder
04-14-2008, 12:13 PM
Doesnt matter! I was being an idiot! and i hadnt put a curly bracket to end in the php backend bit so it was completely throwing me. All together now, 'You absolute idiot ' :P
raman19
04-15-2008, 02:23 AM
Hi I am having a similar problem.. this is my first time using the xmlhttprequest and i was following an example in a book and still cant get it to work.
i am using mozilla 2.0.0.13 . and firebug to debug my script. The serverPage that I am using only has the words Hello World in it. nothing else.
In debug mode i get as far as the IF statement. It never enters into the IF statement. If I hit continue a few times and mouseover .responsetext it does show the contents of the file in the serverPage variable, but it never gets to assign it to the div.

I would appreciate all help..
thanks.

function getProductDetails(serverPage, objID)
{
var httpRequest;
if (window.XMLHttpRequest)
{ // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();

} else if (window.ActiveXObject)
{ // IE
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

var obj= document.getElementById(objID);
httpRequest.onreadystatechange = function()
{
if (httpRequest.readystate == 4)
{

obj.innerHTML = httpRequest.responseText;
}
}
httpRequest.open("GET", serverPage, true);
httpRequest.send(null);
}
thetestingsite
04-15-2008, 03:25 AM
Can you post a link to the problem page, or at least show how you are calling this script (more details please).
raman19
04-15-2008, 01:15 PM
This is the full text. it is just a test page .

I've put breakpoints at various points in the program.
The program first creates the XMLHttpRequest
Then initializes the obj variable.
Then the httpRequest.onreadystatechange
Then httpRequest.open("GET", serverPage, true);
Then begins the If statement.. When i hover over the readystate it shows as undefined.
Then it goes down to the .send(null) line and then back to the if statement.
when i hit continue in the debugger it stays at the if statement. i hit continue again and it still stays at the if statement, but if i hover over the .responestext it shows that the response is loaded with the file that i am trying to get.
But it never assigns the value to the div and it the program doesnt actually go into the if statement to assign the div.

i hope this makes some sense. As far as the way it jumps around and does not follow the sequence of the statements., is this normal AJAX behavior?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX Test </title>

<script type="text/javascript">
function getProductDetails(serverPage, objID)
{
var httpRequest;
if (window.XMLHttpRequest)
{ // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();

} else if (window.ActiveXObject)
{ // IE
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

var obj= document.getElementById(objID);
httpRequest.onreadystatechange = function()
{
if (httpRequest.readystate == 4)
{

obj.innerHTML = httpRequest.responseText;
}
}
httpRequest.open("GET", serverPage, true);
httpRequest.send(null);
}

</script>
<link rel="stylesheet" type="text/css" href="design.css"/>

</head>

<body>
<div id='container' onclick="getProductDetails('productdetails.html','container');">
This is my container


</div> <!-- End Container-->


</body>
</html>
thetestingsite
04-15-2008, 03:35 PM
Something that i completely overlooked was this line:



httpRequest.onreadystatechange = function()
{
if (httpRequest.readystate == 4)


readystate should be readyState (capital S). After that change the code works fine.

Hope this helps.
raman19
04-15-2008, 04:41 PM
Wow.. its always the little things..

Thank you so much for your time. It's really appreciated..

I would have gone on for days without realizing it.