Jump to content

New to Ajax - Drop down list not populating

Vel

By Vel
in Javascript Help

 Share

Recommended Posts

Vel Member

Vel

Posted
Posted

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?

Link to comment
Share on other sites
chipowski Newbie

chipowski

Posted
Posted

Hi.

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

Try this:

 

<html>

<head>

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

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

Link to comment
Share on other sites
Vel Member

Vel

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
Vel Member

Vel

Posted
  • Author
Posted

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

Link to comment
Share on other sites
Vel Member

Vel

Posted
  • Author
Posted

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

Link to comment
Share on other sites
chipowski Newbie

chipowski

Posted
Posted

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.

Link to comment
Share on other sites
Vel Member

Vel

Posted
  • Author
Posted

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.

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.

×
 Share
Go to topic listing
×
×
  • 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.