logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Video Tutorials
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 03-30-2009, 05:39 PM   #1
AMMoyer
 
Join Date: Apr 2008
Posts: 12
Default Adding 3rd tier to Ajax dynamic dropdowns

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.

Code:
// 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);
}
Code:
// 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 is offline   Reply With Quote
Old 03-30-2009, 06:55 PM   #2
AMMoyer
 
Join Date: Apr 2008
Posts: 12
Default

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?

Code:
    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
Code:
<?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.
AMMoyer is offline   Reply With Quote
Old 03-30-2009, 07:09 PM   #3
davidj
davidj's Avatar
 
Join Date: Sep 2005
Location: The Toon (newcastle upon Tyne)
Posts: 8,256
Default

i need time to refresh myself with this
__________________
Would you like to learn PHP from me? Check out -> www.codezenith.co.uk
davidj is offline   Reply With Quote
Old 04-03-2009, 07:00 PM   #4
AMMoyer
 
Join Date: Apr 2008
Posts: 12
Default

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?
Code:
<!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
AMMoyer is offline   Reply With Quote
Old 04-04-2009, 09:54 AM   #5
davidj
davidj's Avatar
 
Join Date: Sep 2005
Location: The Toon (newcastle upon Tyne)
Posts: 8,256
Default

will look at this tomorrow {sunday}
__________________
Would you like to learn PHP from me? Check out -> www.codezenith.co.uk
davidj is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 10:16 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com