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

but i have another question or problem.

i have this img

HTML Code:

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

Code:

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> 

</body>
</html>

**thetestingsite** · 04-15-2008, 03:35 PM

Something that i completely overlooked was this line:

Code:

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.

Thread: AJAX interaction

Thread Tools

Search Thread

AJAX interaction

The Following User Says Thank You to thetestingsite For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions