PDA

View Full Version : Adding 3rd tier to Ajax dynamic dropdowns


AMMoyer
03-30-2009, 04:39 PM
I have successfully been through many of the tutorials here on DC. Currently working on utilizing the Ajax dynamic dropdown. It works fine, however, I need to add the "year" specification to the make and model example. In my case I fill the first box with the year, second with make and need to fill the third with the model. So after the second box has been selected, I need to send both pieces of info (first box value and second box value) to a query to fill in the select box for the third dropdown.

I have been trying, unsuccessfully, to use two js files, one for each of the first two dropdowns. Should I be using two js files or can it be done with one? I believe my problem lies with how I am combining the two values in the queryString statement of the second box.

Here is the code I've been hacking on. I have also added another divModel tag to a third row in the form of the html file. Suggestions and nudges in the right direction are greatly appreciated. Thanks.

// JavaScript Document
function ajaxMake(){
var ajaxRequest; // Magic Variable
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer browsers
try{
ajaxRequest = new ActiveXObject("Msxm12.XMLHTTP");
} catch (e){
try{
ajaxRequestt = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Recieve Data Function
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('DivMake');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var year = document.getElementById('year').value;

var queryString = "?year=" + year;
ajaxRequest.open("GET", "databaseQuery.php" + queryString, true);
ajaxRequest.send(null);
}

// JavaScript Document
function ajaxModel(){
var ajaxRequest; // Magic Variable
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer browsers
try{
ajaxRequest = new ActiveXObject("Msxm12.XMLHTTP");
} catch (e){
try{
ajaxRequestt = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Recieve Data Function
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('DivModel');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var make = document.getElementById('make').value;

var queryString = "?make=" + make;
var queryString = "?year=" + year;
ajaxRequest.open("GET", "modelquery.php" + queryString, true);
ajaxRequest.send(null);
}

Adam M

AMMoyer
03-30-2009, 05:55 PM
Changed the last several lines of models.js to the following. In the queryString statement do I need the & or can I use just the & in js?

var year = document.getElementById('year').value;
var make = document.getElementById('make').value;

var queryString = "?year=" + year + "&make=" + make;
ajaxRequest.open("GET", "modelquery.php" + queryString, true);
ajaxRequest.send(null);

Also the modelquery.php file
<?php
require_once("Connections/connection.php"); // database connection

// Retrieve data from Query String
$make = $_GET['make'];
$year = $_GET['year'];

//build model query
$querymodel = "SELECT DISTINCT modelid, modelname FROM iemmy WHERE yearid = '$year' AND makeid = '$make'";
$resultmodel = @mysql_query($querymodel);
$rowModel = mysql_fetch_array($resultmodel);

/////////////////////////////////////////////////

//Build Result Make String
$model_cbo = "<select name=\"model\">";
$model_cbo .= "<option value=\"\">Select Model</option>";


// Insert a new row in the table for each model returned
do {

$model_cbo .= "<option value=".$rowModel['modelid'].">".$rowModel['modelname']."</option>";

}while ($rowModel = mysql_fetch_array($result));

$model_cbo .= "</select>";

echo $model_cbo;
?>

I'm not even sure how to troubleshoot this. The third select box does not show up after the second is selected.

davidj
03-30-2009, 06:09 PM
i need time to refresh myself with this

AMMoyer
04-03-2009, 06:00 PM
Here's what I have so far. Still cannot get the third select box to populate. Does anyone have any thoughts? I am trying to get both functions ajaxMake and ajaxModel to be in same script. Is that causing trouble?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax</title>
<script language="javascript" type="text/javascript">
function ajaxMake(){
var ajaxRequest = false; // Magic Variable
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer browsers
try{
ajaxRequest = new ActiveXObject("Msxm12.XMLHTTP");
} catch (e){
try{
ajaxRequestt = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}

// Recieve Data Function
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('DivMake');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var year = document.getElementById('year').value;

var queryString = "?year=" + escape(year);
ajaxRequest.open("GET", "makeQuery.php" + queryString, true);
ajaxRequest.send(null);
}
function ajaxModel(){
// Recieve Data Function
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var modelDisplay = document.getElementById('DivModel');
modelDisplay.innerHTML = ajaxRequest.responseText;
}
}
var year = document.getElementById('year').value;
var make = document.getElementById('make').value;

var queryString = "?year=" + escape(year) + "&make=" + escape(make);
modelRequest.open("GET", "modelquery.php" + queryString, true);
modelRequest.send(null);
}
</script>
<!--<script language="javascript" type="text/javascript" src="model.js"></script>-->
<link href="ajax.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p class="style1">AJAX dynamic dropdowns </p>
<form name='myForm'>

<table width="200" border="0">
<tr>
<td width="200">
<div id='DivYear' align="center">
<select name="year" style="width: 90%" onchange="ajaxMake()" id="year">
<option value="">Select Year</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
</select></td>
</tr>
<tr>
<td><div id='DivMake' align="center";>
<select name="make" style="width: 90%" onchange="ajaxModel() id="make">
<option value="">Select Make</option>
</select>
</div> </td>
</tr>
<tr>
<td><div id='DivModel' align="center">
<select name="model" style="width: 90%" onchange="">
<option value="">Select Model</option>
</select>
</div> </td>
</tr>
</table>
</form>
</body>
</html>

Any input is greatly appreciated. Thanks.
Adam

davidj
04-04-2009, 08:54 AM
will look at this tomorrow {sunday}