Jump to content

problems even getting AJAX to work


Woodburn2006

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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)/

Link to comment
Share on other sites

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;
}

Link to comment
Share on other sites

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> ";

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.