New to Ajax - Drop down list not populating

Vel · May 12, 2011

Hi guys, I'm new to Ajax and want to use it to dynamically change 1 drop down list depending on the selection of another. Here is my code:

<?php
echo "<form name=\"createFleet\" method=\"post\" action=\"scripts/fleet.php\">";
echo "<input name=\"fleetSize\" type=\"hidden\" value=\"1\">";
echo "Fleet Location: <select name=\"fleetLocationRegion\" onchange=\"ajax(this.value)\">";
echo "<option value=\"\">Selecte Region</option>";
echo "<option value=\"aridia\">Aridia</option>";
echo "<option value=\"blackrise\">Black Rise</option>";
echo "<option value=\"derelik\">Derelik</option>";
echo "<option value=\"devoid\">Devoid</option>";
echo "<option value=\"domain\">Domain</option>";
echo "<option value=\"essence\">Essence</option>";
echo "<option value=\"genesis\">Genesis</option>";
echo "<option value=\"heimatar\">Heimatar</option>";
echo "<option value=\"kador\">Kador</option>";
echo "<option value=\"khanid\">Khanid</option>";
echo "<option value=\"korazor\">Korazor</option>";
echo "<option value=\"lonetrek\">Lonetrek</option>";
echo "<option value=\"metropolis\">Metropolis</option>";
echo "<option value=\"moldenheath\">Molden Heath</option>";
echo "<option value=\"placid\">Placid</option>";
echo "<option value=\"sinqlaison\">Sinq Laison</option>";
echo "<option value=\"solitude\">Solitude</option>";
echo "<option value=\"tashmurkon\">Tash-Murkon</option>";
echo "<option value=\"thebleaklands\">The Bleak Lands</option>";
echo "<option value=\"thecitadel\">The Citadel</option>";
echo "<option value=\"theforge\">The Forge</option>";
echo "<option value=\"vergevendor\">Verge Vendor</option>";
echo "</select>";
echo "<div id=\"ajaxResult\">";
echo "Constellation: <select name=\"fleetLocationConstellation\">";
echo "<option value=\"\">Select Region First</option>";
echo "</select>";
echo "</div>";
echo "<input name=\"submit\" type=\"submit\" value=\"Create Fleet\">";
echo "</form>";
?>
<script type="text/javascript">
function ajax(str) {
if (str=="") {
	document.getElementById("ajaxResult").innerHTML="Constellation: <select name=\"fleetLocationConstellation\"><option value=\"\">Select Region First</option></select>";
	return;
}
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp=new XMLHttpRequest();
}
else { // code for IE6, IE5
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
	if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    		document.getElementById("ajaxResult").innerHTML=xmlhttp.responseText;
    	}
  	}
Alert("Ajax Sent");
xmlhttp.open("GET","constellation.php?r="+str,true);
xmlhttp.send();
}
</script>

For some reason when the first drop down list is changed it's not calling the javascript subroutine. I added the alert to see if the ajax request was being sent and nothing. I copied an example from http://w3schools.com/php/php_ajax_database.asp and as far as I can tell this should be working. Can someone help please?

chipowski · May 13, 2011

Hi.

I think you simply need to defined the ajax function prior to defining the drop down contents.

Try this:

<html>

<head>

function ajax(str) {

if (str=="") {

document.getElementById("ajaxResult").innerHTML="Constellation: <select name=\"fleetLocationConstellation\"><option value=\"\">Select Region First</option></select>";

return;

}

if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else { // code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState==4 && xmlhttp.status==200) {

document.getElementById("ajaxResult").innerHTML=xmlhttp.responseText;

}

Alert("Ajax Sent");

xmlhttp.open("GET","constellation.php?r="+str,true);

xmlhttp.send();

}

</script>

</head>

<body>

<?php

echo "<form name=\"createFleet\" method=\"post\" action=\"scripts/fleet.php\">";

echo "<input name=\"fleetSize\" type=\"hidden\" value=\"1\">";

echo "Fleet Location: <select name=\"fleetLocationRegion\" onchange=\"ajax(this.value)\">";

echo "<option value=\"\">Selecte Region</option>";

echo "<option value=\"aridia\">Aridia</option>";

echo "<option value=\"blackrise\">Black Rise</option>";

echo "<option value=\"derelik\">Derelik</option>";

echo "<option value=\"devoid\">Devoid</option>";

echo "<option value=\"domain\">Domain</option>";

echo "<option value=\"essence\">Essence</option>";

echo "<option value=\"genesis\">Genesis</option>";

echo "<option value=\"heimatar\">Heimatar</option>";

echo "<option value=\"kador\">Kador</option>";

echo "<option value=\"khanid\">Khanid</option>";

echo "<option value=\"korazor\">Korazor</option>";

echo "<option value=\"lonetrek\">Lonetrek</option>";

echo "<option value=\"metropolis\">Metropolis</option>";

echo "<option value=\"moldenheath\">Molden Heath</option>";

echo "<option value=\"placid\">Placid</option>";

echo "<option value=\"sinqlaison\">Sinq Laison</option>";

echo "<option value=\"solitude\">Solitude</option>";

echo "<option value=\"tashmurkon\">Tash-Murkon</option>";

echo "<option value=\"thebleaklands\">The Bleak Lands</option>";

echo "<option value=\"thecitadel\">The Citadel</option>";

echo "<option value=\"theforge\">The Forge</option>";

echo "<option value=\"vergevendor\">Verge Vendor</option>";

echo "</select>";

echo "<div id=\"ajaxResult\">";

echo "Constellation: <select name=\"fleetLocationConstellation\">";

echo "<option value=\"\">Select Region First</option>";

echo "</select>";

echo "</div>";

echo "<input name=\"submit\" type=\"submit\" value=\"Create Fleet\">";

echo "</form>";

?>

</body>

</html>

Vel · May 13, 2011

Nope, putting the Ajax function in the head did nothing. The alert still isn't showing so the ajax script still isn't being called for some reason.

chipowski · May 13, 2011

Ok - was worth a shot.

I'll have a look at this when back home - in work now so got limited access to stuff

Vel · May 13, 2011

Ok - was worth a shot.

I'll have a look at this when back home - in work now so got limited access to stuff

Thank you, I appreciate it. I have no idea why it's not calling the function, nor how to trouble shoot it.

chipowski · May 13, 2011

Can you post the contents of constellation.php with any db connection details removed if you are using a db connection. Also if you are using a db, can you post the values from your tables.

Vel · May 13, 2011

Constellation.php:

<?php
/*
Load constellations script:
This script loads the constellations of a region from the database depending on the region selected by the user.
It responds to the AJAX request.
*/
require("../includes/config.php");

//Check region has been passed to script
if(isset($_GET['r']))
$region = "constellations" . $_GET['r'];
else
die('Error: No constellation passed to script.');

if(!$dbCon)  //Connect to the database
die('Could not connect to the database: ' . mysql_error()); //Stop script and display error if connecton fails
mysql_select_db($dbName, $dbCon); //Select database

$sqlLoadConstellations = "SELECT * FROM `$region`"; //Set sql to select constellations
$queryLoadConstellations = mysql_query($sqlLoadConstellations); //Set query
echo "Constellation: <select name=\"fleetLocationConstellation\">";
while($rowLoadConstellations = mysql_fetch_array($queryLoadConstellations)) { //Load constellations from the table
$constellation = strtolower($rowLoadConstellations['constellation']);
$constellation = str_replace(" ", "", $constellation);
echo "<option value=\"$constellation\">" . $rowLoadConstellations['constellation'] . "</option>";
}
echo "</select>";

mysql_close($dbCon);
?>

The table just contains 2 columns, key (auto increment primary) and the constellation name. I have 23 different constellation tables, this is one example:

key constellation

1 Afinoo

2 Anama

3 Fabai

4 Helab

5 Leseasesh

6 Maal

7 Mareerieh

8 Mayonhen

9 Ombil

10 Selonat

11 Tid

Vel · May 13, 2011

A bit more googling later and my code is now:

echo "<form name=\"selectRegion\" action=\"\">";
echo "Fleet Location: <select name=\"fleetLocationRegion\" onchange=\"javascript:funcAjax(this.selectedIndex);\">";
echo "<option value=\"\">Selecte Region</option>";
echo "<option value=\"aridia\">Aridia</option>";
echo "<option value=\"blackrise\">Black Rise</option>";
echo "<option value=\"derelik\">Derelik</option>";
echo "<option value=\"devoid\">Devoid</option>";
echo "<option value=\"domain\">Domain</option>";
echo "<option value=\"essence\">Essence</option>";
echo "<option value=\"genesis\">Genesis</option>";
echo "<option value=\"heimatar\">Heimatar</option>";
echo "<option value=\"kador\">Kador</option>";
echo "<option value=\"khanid\">Khanid</option>";
echo "<option value=\"korazor\">Korazor</option>";
echo "<option value=\"lonetrek\">Lonetrek</option>";
echo "<option value=\"metropolis\">Metropolis</option>";
echo "<option value=\"moldenheath\">Molden Heath</option>";
echo "<option value=\"placid\">Placid</option>";
echo "<option value=\"sinqlaison\">Sinq Laison</option>";
echo "<option value=\"solitude\">Solitude</option>";
echo "<option value=\"tashmurkon\">Tash-Murkon</option>";
echo "<option value=\"thebleaklands\">The Bleak Lands</option>";
echo "<option value=\"thecitadel\">The Citadel</option>";
echo "<option value=\"theforge\">The Forge</option>";
echo "<option value=\"vergevendor\">Verge Vendor</option>";
echo "</select>";
echo "</form>";
echo "<form name=\"createFleet\" method=\"post\" action=\"scripts/fleet.php\">";
echo "<input name=\"fleetSize\" type=\"hidden\" value=\"1\">";
echo "<div id=\"ajaxResult\">";
echo "Constellation: <select name=\"fleetLocationConstellation\">";
echo "<option value=\"\">Select Region First</option>";
echo "</select>";
echo "</div>";
echo "<input name=\"submit\" type=\"submit\" value=\"Create Fleet\">";
echo "</form>";

Still not working...

chipowski · May 14, 2011

Hi.

Just managed to get the alert to work based on your very first set of code.

The error is in this line:

Alert("Ajax Sent");

It should be:

alert("Ajax Sent");

Simply need to change the capital A of alert to lowercase. Let me know if you can get the alert message now.

I've not looked into populating the second drop down as that will be very straightforward but do let me know if you need any more help.

Vel · May 14, 2011

OK, we have progress... damn typo lol. It seems that I had fixed it and then broken it again with the Alert typo. The Ajax script is now working as inteded with the code : <select name=\"fleetLocationRegion\" onchange=\"javascript:funcAjax(this.value);\">

Seems all it needed was the javascript: in front of it. Thank you for your help with this rather frustrating problem.

Sign In

New to Ajax - Drop down list not populating

Recommended Posts

Vel

Link to comment

Share on other sites

chipowski

Link to comment

Share on other sites

Vel

Link to comment

Share on other sites

chipowski

Link to comment

Share on other sites

Vel

Link to comment

Share on other sites

chipowski

Link to comment

Share on other sites

Vel

Link to comment

Share on other sites

Vel

Link to comment

Share on other sites

chipowski

Link to comment

Share on other sites

Vel

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information