problems even getting AJAX to work

Woodburn2006 · September 16, 2008

i have tried to get AJAX working for a good few days now, i have tried several tutorials and i can only get very simple ones to work.

if you look at this page: http://ajaxtesting.dw20.co.uk it is all the tutorials i have tried

i have even tried the tutorial on this site and simply copied and pasted it but it still wont work

cany anyone advise me on what i am doing wrong, thanks alot

PFMaBiSmAd · September 16, 2008

We only see the information that you provide in your post. To get specific help you need to post the exact code you are using and describe what you see in front of you when you try it. What is it doing? Does the page display in the browser but nothing updates? What browser are you using? Does the server side script return the expected results when you browse directly to it? What have you done to troubleshoot and find what parts work and at what point it does not work?

I am constantly amazed that people ask for help with something that they are doing but don't provide any relevant information about what they see in front of them and then expect mind reading to work over the Internet.

Woodburn2006 · September 16, 2008

yeh sorry dint really think when i typed the post, was just getting frustrated.

i wanted to try a ttorial of an ajax script that connected to a mysql database so i did this tutorial: http://www.w3schools.com/php/php_ajax_database.asp

this is the html page:

<html>
<head>
<script src="selectuser.js"></script>
</head>
<body><form> 
Select a User:
<select name="users" onChange="showUser(this.value)">
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form><p>
<div id="txtHint"><b>User info will be listed here.</b></div>
</p></body>
</html>

this is the JS page (selectuser.js):

var xmlHttp

function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Browser does not support HTTP Request")
  return
  } 
var url="getuser.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
} 
}function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}
return xmlHttp;
}

this is the php page (getuser.php) i removed db details:

<?php
$q=$_GET["q"];

$con = mysql_connect('', '', '');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}

mysql_select_db("", $con);

$sql="SELECT * FROM db_demo WHERE id = '".$q."'";

$result = mysql_query($sql);

echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";

while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";

mysql_close($con);
?>

when i look at the page it displays correctly but when you select someone from the list it does not display anything, so basically does not work at all and as i am new to ajax i do not know how to debug it.

a working example is on the w3schools site and this is the addy to my version: http://ajaxtesting.dw20.co.uk/db/

i have tried it in IE, firefox and safari and none of them work.

another tutorial i tried is the one that is sticky in this forum and all i did is copied the code and i get this result: http://ajaxtesting.dw20.co.uk/New%20Folder%20(2)/

KevinM1 · September 16, 2008

Are you getting any JavaScript errors? If so, you should post them as it'll help us diagnose the problem.

In the meantime, are you certain that you're successfully creating an XMLHTTP object? I ran into some problems creating one myself due to the way IE does things. Try the following:

function createXmlHttp()
{
var xmlHttp;

try
{
	//try the hard way because IE7 doesn't implement XMLHttpRequest() properly
	var xmlVersions = new Array('MSXML2.XMLHTTP.6.0',
                                                      'MSXML2.XMLHTTP.5.0',
                                                      'MSXML2.XMLHTTP.4.0',
                                                      'MSXML2.XMLHTTP.3.0',
                                                      'MSXML2.XMLHTTP',
                                                      'Microsoft.XMLHTTP');

	//iterate through the array until we get one that works
	for(var i = 0; i < xmlVersions.length && !xmlHttp; i++)
	{
		xmlHttp = new ActiveXObject(xmlVersions[i]);
	}
}
catch(e)
{
	//try the easy way for the good browsers
	xmlHttp = new XMLHttpRequest();
}

//return object (if we have one) or null
return xmlHttp;
}

Woodburn2006 · September 16, 2008

that does not seem to solve anything, i get an error saying that on:

url: http://ajaxtesting.dw20.co.uk/db

line: 7

char: 1

error: object unexpected

does this help solve anything?

Woodburn2006 · September 16, 2008

wooohooo i managed to get it to work, it was the tutorials fault not mine tho, the code they supplied was wrong, the function name was wrong therefore it was not calling a function, so now hopefully i can continue to write my code.

just one more problem to overcome, i know how use ajax when linkin from a form element like:

<select name="users" onChange="showUser(this.value)">

but what i need to do is use ajax from an image, so that when the image is clicked it will call the same ajax script

so what i basically want to know is: how would i edit this line to call a ajax function?

echo "<a href='?go=photos&id=$photo_id&a=$a'><img src='$url' height='65px'></a> ";

KevinM1 · September 16, 2008

that does not seem to solve anything, i get an error saying that on:

url: http://ajaxtesting.dw20.co.uk/db

line: 7

char: 1

error: object unexpected

does this help solve anything?

It does, actually. You've just encountered one of the most common and frustrating JavaScript errors. Here's what's happening:

All of your JavaScript functions and variables are being created before the actual document (i.e., the HTML) is rendered. This causes errors because none of the elements referenced by your script exist yet. So, you can't obtain them through getElementById because they're not there. In order to fix this, you need to wait for the document to load, then let JavaScript build its element references. Thankfully, there's an easy way to do this:

<script type="text/javascript">
   window.onload = function()
   {
      //rest of your script goes here
   }
</script>

This tells the rest of your script to wait until the document is loaded before getting references to the HTML elements your functions need.

As an aside, you're better off initially testing your JavaScript applications in Firefox using the Firebug addon. Both give much better error messages, and Firebug actually highlights the line where the error occurred.

Woodburn2006 · September 16, 2008

cool thanks for the reply but that is sorted now, just need to sort my other question which is above ....

gethinw · September 23, 2008

You need to do something like:

echo "<a href='javascript:showUser(\"username\");'><img.../></a>"

but replacing username with either a fixed value, or with some php to insert a different value depending on the image - it's impossible to say which without knowing more about what you're trying to do.

Sign In

problems even getting AJAX to work

Recommended Posts

Woodburn2006

Link to comment

Share on other sites

PFMaBiSmAd

Link to comment

Share on other sites

Woodburn2006

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

Woodburn2006

Link to comment

Share on other sites

Woodburn2006

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

Woodburn2006

Link to comment

Share on other sites

gethinw

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information