Link to home
Start Free TrialLog in
Avatar of bradfordgiosa
bradfordgiosa

asked on

Cascading Drop Down List populated from MYSQL Database

I was recommened to post here as I was told AJAX would work better for my application.

Here is my previous post:
https://www.experts-exchange.com/questions/23686022/Cascading-Drop-Down-List-populated-from-Mysql.html?cid=748&anchorAnswerId=22340593#a22340593

Basically I have the database setup and some very very primative php files that I am not totally comfortable with.

I need to design an interface for my database as follows:

A user selects a car maker from dropdown list #1 (this list is populated from the make field of the maker table via maker_id?).
After this occurs, the models for that maker appear in dropdown list #2 (this dd list is populated likewise from its respective table via its respective field(s)?).

After this, only the years that that specific make >model was made are populated to dropdown list #3.
(in other words if there is no make > model for that year, the year is not included in the list)
(i.e. if a Honda delSol was selected, only the years 1993 -1997 should populate and appear in the list)
Any suggestions for the AJAX code or does anything have somehting similar?
Alogn with querying and viewing, I also want to be able to insert/update my data the same way.
Is this possible (using the same drop downs to select the make, model and year then having input boxes ( for technotes, that my technicians can fill in) and  then submit the data to the database for that specific make/model/year)?

Does anyone see a problem with the way the database is setup? Perhaps for the years? (see code snippet for for sql).

Any and as much help would be very much appreciated.


Bradford Giosa

phpMyAdmin SQL Dump
-- version 2.11.3deb1ubuntu1
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Aug 28, 2008 at 07:11 PM
-- Server version: 5.0.51
-- PHP Version: 5.2.4-2ubuntu5.1
 
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
 
--
-- Database: `vehicle`
--
 
-- --------------------------------------------------------
 
--
-- Table structure for table `maker`
--
 
CREATE TABLE IF NOT EXISTS `maker` (
  `maker_id` int(10) NOT NULL auto_increment,
  `make` varchar(20) NOT NULL,
  PRIMARY KEY  (`maker_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=49 ;
 
--
-- Dumping data for table `maker`
--
 
INSERT INTO `maker` (`maker_id`, `make`) VALUES
(1, 'Acura'),
(2, 'Alfa Romeo'),
(3, 'AMC'),
(4, 'Audi'),
(5, 'BMW'),
(6, 'Buick'),
(7, 'Cadillac'),
(8, 'Chevy'),
(9, 'Chevy Truck'),
(10, 'Chevy Van'),
(11, 'Chrysler'),
(12, 'Dodge'),
(13, 'Eagle'),
(14, 'Electromotive'),
(15, 'Ford'),
(16, 'Ford Truck'),
(17, 'Ford Van'),
(18, 'Geo'),
(19, 'GMC'),
(20, 'Harley'),
(21, 'Honda'),
(22, 'Hummer'),
(23, 'Hyundai'),
(24, 'Infiniti'),
(25, 'Isuzu'),
(26, 'Jaguar'),
(27, 'Jeep'),
(28, 'Kia'),
(29, 'Land Rover'),
(30, 'Lexus'),
(31, 'Lincoln'),
(32, 'Mazda'),
(33, 'Mercedes'),
(34, 'Mercury'),
(35, 'Mini'),
(36, 'Mitsubishi '),
(37, 'Nissan'),
(38, 'Oldmobile'),
(39, 'Pontiac'),
(40, 'Porche'),
(41, 'Saab'),
(42, 'Saturn'),
(43, 'Scion'),
(44, 'Subaru'),
(45, 'Suzuki'),
(46, 'Toyota'),
(47, 'Volkwagen'),
(48, 'Volvo');
 
-- --------------------------------------------------------
 
--
-- Table structure for table `model`
--
 
CREATE TABLE IF NOT EXISTS `model` (
  `model_ID` int(10) NOT NULL auto_increment,
  `maker_ID` int(10) NOT NULL,
  `model` varchar(20) NOT NULL,
  `year` year(4) NOT NULL,
  PRIMARY KEY  (`model_ID`),
  KEY `maker_ID` (`maker_ID`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
 
--
-- Dumping data for table `model`
--
 
 
-- --------------------------------------------------------
 
--
-- Table structure for table `technotes`
--
 
CREATE TABLE IF NOT EXISTS `technotes` (
  `tech_notes_id` int(10) NOT NULL auto_increment,
  `model_id` int(10) NOT NULL,
  `tech_notes` text NOT NULL,
  PRIMARY KEY  (`tech_notes_id`),
  KEY `model_id` (`model_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
 
--
-- Dumping data for table `technotes`
--
 
 
-- --------------------------------------------------------
 
--
-- Table structure for table `years`
--
 
CREATE TABLE IF NOT EXISTS `years` (
  `year_id` int(4) NOT NULL auto_increment,
  `year` year(4) NOT NULL,
  PRIMARY KEY  (`year_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=12 ;
 
--
-- Dumping data for table `years`
--
 
INSERT INTO `years` (`year_id`, `year`) VALUES
(1, 2008),
(2, 2007),
(3, 2006),
(4, 2005),
(5, 2004),
(6, 2003),
(7, 2002),
(8, 2001),
(9, 2000),
(10, 1999),
(11, 1998);
 
--
-- Constraints for dumped tables
--
 
--
-- Constraints for table `model`
--
ALTER TABLE `model`
  ADD CONSTRAINT `model_ibfk_1` FOREIGN KEY (`maker_ID`) REFERENCES `maker` (`maker_id`) ON DELETE CASCADE ON UPDATE CASCADE;
 
--
-- Constraints for table `technotes`
--
ALTER TABLE `technotes`
  ADD CONSTRAINT `technotes_ibfk_1` FOREIGN KEY (`model_id`) REFERENCES `model` (`model_ID`) ON DELETE CASCADE ON UPDATE CASCADE;

Open in new window

Avatar of Chakotay505
Chakotay505
Flag of Germany image

Hello,

indeed your years-table doesn't seem to fit into the structure you described.
I see no connection between your model- and your years-table, I propose you just delete that years table, I don't see why you would need it.

What you need for your application is:
1. JavaScript code, that sends requests to the server, receives the data and creates the updates select-fields
2. A script running on the server with the database
This script takes parameters send by the JavaScript like action=getModels & maker_id=4, accesses the database to fetch the corresponding data and sends it back to the user / the javascript metnioned at 1 (as xml file or html code).

To the second part of your question: I don't think you could use the same frontend for creating / inserting new models, as you don't want to have the same ones, do you?
Instead, a simple form with a dropdown for the maker should suffice.

If you need further help with any part of the application, feel free to ask.
I attached some code that could help you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" language="javascript">
function ajaxCall(target, requestString, responseFunction) {
	var xmlRequest = false;
	
	if(window.XMLHttpRequest) {
		xmlRequest = new XMLHttpRequest();
		
		if(xmlRequest.overrideMimeType) {
			xmlRequest.overrideMimeType('text/xml; charset=iso-8859-1');
		}
	}
	else if(window.ActiveXObject) {
		try {
			xmlRequest = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch(e) {
			xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	
	xmlRequest.open('POST', target, true);
	xmlRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=iso-8859-1');
	xmlRequest.onreadystatechange = function() {
		if(xmlRequest.readyState == 4) {
			responseFunction(xmlRequest.responseXML);
		}
	}
	
	xmlRequest.send(requestString);
}
 
function fetchModels() {
	var maker_id = document.getElementById("maker").value;
	
	ajaxCall("your_handler.php", "action=getModels&id=" + maker_id, modelsResponse);
}
 
function modelsResponse(xmlResponse) {
	if(xmlResponse.getElementsByTagName("modelsSelect")[0] && xmlResponse.getElementsByTagName("modelsSelect")[0].childNodes[0] && xmlResponse.getElementsByTagName("modelsSelect")[0].childNodes[0].data) {		
		document.getElementById("modelsDiv").innerHTML = xmlResponse.getElementsByTagName("modelsSelect")[0].childNodes[0].data;
	}
}
 
function fetchYears() {
 
}
 
function yearsResponse(xmlResponse) {
 
}
</script>
</head>
 
<body>
<div>
	<!-- Filled using a server markup language like PHP, ASP or JSP -->
	<select id="maker" onchange="fetchModels();">
		<option value="1">Acura</option>
		<option value="2">Alfa Romeo</option>
	</select>
</div>
<div id="modelsDiv"></div>
<div id="yearsDiv"></div>
</body>
</html>
 
// Sample XML Response for action=getModels
// Basically it returns the select, but you'll have to escape the html characters using a function like php's htmlentities
// Cleartext: <select id="model" onchange="fetchYears();"><option value="1">abc</option><option value="2">def</option></select>
<response>
	<modelsSelect>&lt;select id=&quot;model&quot; onchange=&quot;fetchYears();&quot;&gt;&lt;option value=&quot;1&quot;&gt;abc&lt;/option&gt;&lt;option value=&quot;2&quot;&gt;def&lt;/option&gt;&lt;/select&gt;</modelsSelect>
</response>

Open in new window

Avatar of bradfordgiosa
bradfordgiosa

ASKER

Well some of the tech notes that we want to store for each model are different depending on the year. That is why i need the years to differentiat the notes for the specific model. Example: A Ford Mustang in 1997 has a V6 engine option which uses an oil filter with an 3/4 unf 16 oil filter. While the 2007 Ford Mustang w a V6 engine option uses an M22x1.5-6h oil fiilter..

I need to differentiate this information for the years as well as engine options like V6, V8 (4.6l) and V8 (5.3l).. So i am guessing I need more tables with more fields?

Also how would I go about connecting to the database with the script you attached? Do i need a global config script?
Hello,

you don't need more tables, you can store the information in your models, but you would have to add the columns you need for storing these additional information. The two cars you mentioned would be stored in the database as different models, if you want a list with all ford mustangs (ignoring the year) you could do that on this way too, the corresponding mysql command would be "select * from model group by model".

The script I attached is meant to illustrate how you would have to design your page and would only do the client part of the whole thing, you would also need a backend, written in PHP for example. This is where you would connect to the database and fetch your models or makers and deliver them to the client using xml.
Ok, so i need to design and program the backend. I am very new to xml and have little knowledge on how to connect it with php and mysql.. Any thoughts, resources or tips?
ASKER CERTIFIED SOLUTION
Avatar of Chakotay505
Chakotay505
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial