First AJAX script not working - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

First AJAX script not working

Can't figure out what's wrong either...

Br3nn4n

8:18 pm on Jan 28, 2008 (gmt 0)

10+ Year Member

Here's my code, can someone tell me why it's doing nothing?


<html>
<head>
<script type="text/javascript" language="javascript">
var ajaxcontrol
function doQuery(article) {
var ajaxcontrol=domakeobject()
if (ajaxcontrol==null) {
alert ("browser doesn't support ajax?");
return
}
var url="querydb.php"
url=url+"?article="+article
ajaxcontrol.onreadystatechange=ajaxoutput
ajaxcontrol.open("GET",url,true)
ajaxcontrol.send(null)
}function ajaxoutput() {
if (ajaxcontrol.readyState=4 ¦¦ ajaxcontrol.readyState="complete") {
document.getElementById("ajaxdata").innerHTML=ajaxcontrol.responseText
}
}
function domakeobject() {
var ajaxcontrol=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 ajaxcontrol=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  ajaxcontrol=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  try
   {
   ajaxcontrol=new ActiveXObject("Microsoft.XMLHTTP");
   }
  catch (e)
   {
   alert("Your browser does not support AJAX!");
   return false;
   }
  }
 }
 }
</script>
<title>brennan's ajax test</title>
</head>
<body>
<form method="POST">
Select an article to load for editing<br>
<select name="selectarticle" onselect="doQuery(this.value)">
<option value="1">News - Article 1</option>
<option value="2">News - Article 2</option>
<option value="3">News - Article 3</option>
</select>
</form>
<div id="ajaxdata">this is where teh ajax will be shown once something is selected up there</div></body>
</html>

Could it be a wrong mysql query? If I errortrap the php page will it display the error if I use die();?

Thanks!

d40sithui

10:47 pm on Jan 28, 2008 (gmt 0)

10+ Year Member

Theres a few things i noticed wrong wtih it. This script as it stand will produce some js errors. Thats why you're not getting anything on the reponsetext.

try this.

<?

/*
#3559980
Webmasterworld
01/28/2008
*/
?>

<html>
<head>
<script>
var ajaxcontrol;
function ajaxoutput() {
if (ajaxcontrol.readyState==4) {
document.getElementById("ajaxdata").innerHTML=ajaxcontrol.responseText;
}
}
function domakeobject() {
ajaxcontrol=null;
try {
// Firefox, Opera 8.0+, Safari
ajaxcontrol=new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
ajaxcontrol=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try {
ajaxcontrol=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}

return ajaxcontrol;
}
function doQuery(form){
var article = form.selectarticle.options[form.selectarticle.options.selectedIndex].value;
var ajaxcontrol = new domakeobject();
if (ajaxcontrol==null) {
alert ("Browser doesn't support ajax.");
return;
}
var url="querydb.php";
url=url+"?article="+article;
ajaxcontrol.onreadystatechange=ajaxoutput;
ajaxcontrol.open("GET",url,true);
ajaxcontrol.send(null);
}
</script>
<title>brennan's ajax test</title>
</head>

<body>
<form method="POST">
Select an article to load for editing<br>
<select name="selectarticle" onchange="doQuery(this.form);">
<option value="1">News - Article 1</option>
<option value="2">News - Article 2</option>
<option value="3">News - Article 3</option>
</select>
</form>

<div id="ajaxdata">this is where teh ajax will be shown once something is selected up there</div>

</body>
</html>

Br3nn4n

2:23 am on Jan 29, 2008 (gmt 0)

10+ Year Member

Okay...couple questions though...

First off, does the order the functions are placed in the code matter? If so that's odd since I pulled a majority of the code from w3schools.

Second, what's being called at the ajaxcontrol.onreadystatechange? It seems like it should be the ajaxoutput FUNCTION, but is it instead just the variable ajaxcontrol? That part just doesn't quite seem right, sorry...

Thanks!

Br3nn4n

2:24 am on Jan 29, 2008 (gmt 0)

10+ Year Member

Okay...couple questions though...

First off, does the order the functions are placed in the code matter? If so that's odd since I pulled a majority of the code from w3schools.

Second, what's being called at the ajaxcontrol.onreadystatechange? It seems like it should be the ajaxoutput FUNCTION, but is it instead just the variable ajaxcontrol? That part just doesn't quite seem right, sorry...

Thanks!

d40sithui

3:34 pm on Jan 29, 2008 (gmt 0)

10+ Year Member

You can answer a lot of your questions if you copy and pasted this.
I'm not sure if the order matters, but i think if you use a js validator for your orginal script, it will have a warning of "function underfined before use" or something like that. I opt to make this as valid as possible.
in regards to the onreadystatechange, it does call the ajaxouput function, but without the (). adding the () will generate errors somehow. weird.

mehh

8:15 pm on Jan 29, 2008 (gmt 0)

10+ Year Member

In regards to the onreadystatechange:

someelement.someevent=somefunction

is telling the JS engine "every time

someevent

is called, run

somefunction

",

someelement.someevent=somefunction()

is telling the JS engine "run

somefunction

then every time

someevent

is called, run

somefunction

's return value".
They are two seperate things. one is sortof a pointer to the function the other is just its return value. More info here [webmasterworld.com]