[SOLVED] Ajax chained select boxes tutorial

yandoo · February 2, 2008

Hi there,

Im going through a tutorial and just cant seem to get the 2nd list/menu to dilsplay is results..... The copde is copied and pasted for testing purposes, so i donmt think theres a problem with syntax.???

Please Note the tutorial is at http://www.dhtmlgoodies.com/index.html?whichScript=ajax_chained_select

I put the HEAD & BODY code from the tutorial in the same getCities.php file that has the php...Was that right????

I have 2 files getCities.php, ajax.js

<!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>Untitled Document</title>
<style type="text/css">
body{
background-repeat:no-repeat;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
height:100%;
background-color: #FFF;
margin:0px;
padding:0px;
}
select{
width:150px;
}
</style>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
/************************************************************************************************************
Ajax chained select
Copyright (C) 2006  DTHMLGoodies.com, Alf Magne Kalleland

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA

Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
written by Alf Magne Kalleland.

Alf Magne Kalleland, 2006
Owner of DHTMLgoodies.com


************************************************************************************************************/	
var ajax = new Array();

function getCityList(sel)
{
var countryCode = sel.options[sel.selectedIndex].value;
document.getElementById('dhtmlgoodies_city').options.length = 0;	// Empty city select box
if(countryCode.length>0){
	var index = ajax.length;
	ajax[index] = new sack();

	ajax[index].requestFile = 'getCities.php?countryCode='+countryCode;	// Specifying which file to get
	ajax[index].onCompletion = function(){ createCities(index) };	// Specify function that will be executed after file has been found
	ajax[index].runAJAX();		// Execute AJAX function
}
}

function createCities(index)
{
var obj = document.getElementById('dhtmlgoodies_city');
eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
}


function getSubCategoryList(sel)
{
var category = sel.options[sel.selectedIndex].value;
document.getElementById('dhtmlgoodies_subcategory').options.length = 0;	// Empty city select box
if(category.length>0){
	var index = ajax.length;
	ajax[index] = new sack();

	ajax[index].requestFile = 'getSubCategories.php?category='+category;	// Specifying which file to get
	ajax[index].onCompletion = function(){ createSubCategories(index) };	// Specify function that will be executed after file has been found
	ajax[index].runAJAX();		// Execute AJAX function
}
}
function createSubCategories(index)
{
var obj = document.getElementById('dhtmlgoodies_subcategory');
eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
}		
</script>
</head>

<body>

<form action="" method="post">
<table>
<tr>
	<td>Country: </td>
	<td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this)">
		<option value="">Select a country</option>
		<option value="dk">Denmark</option>
		<option value="no">Norway</option>
		<option value="us">US</option>
	</select>
	</td>
</tr>
<tr>
	<td>City: </td>
	<td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city">

	</select>
	</td>
</tr>
<tr>
	<td colspan="2"><b>Second example</b></td>
</tr>
<tr>
	<td>Category: </td>
	<td><select id="dhtmlgoodies_category" name="dhtmlgoodies_category" onchange="getSubCategoryList(this)">
		<option value="">Select a category</option>
		<option value="1">Cars</option>
		<option value="2">Boats</option>
		<option value="3">Airplanes</option>
	</select>
	</td>
</tr>
<tr>
	<td>Sub category: </td>
	<td><select id="dhtmlgoodies_subcategory" name="dhtmlgoodies_subcategory">

	</select>
	</td>
</tr>
</table>
</form>
<?php

if(isset($_GET['countryCode'])){
  
  switch($_GET['countryCode']){
    
    case "no":
      echo "obj.options[obj.options.length] = new Option('Bergen','1');\n";
      echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n";
      echo "obj.options[obj.options.length] = new Option('Oslo','3');\n";
      echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n";
      
      break;
    case "dk":
      
      echo "obj.options[obj.options.length] = new Option('Aalborg','11');\n";
      echo "obj.options[obj.options.length] = new Option('Copenhagen','12');\n";
      echo "obj.options[obj.options.length] = new Option('Odense','13');\n";
      
      break;
    case "us":
      
      echo "obj.options[obj.options.length] = new Option('Atlanta','21');\n";
      echo "obj.options[obj.options.length] = new Option('Chicago','22');\n";
      echo "obj.options[obj.options.length] = new Option('Denver','23');\n";
      echo "obj.options[obj.options.length] = new Option('Los Angeles','24');\n";
      echo "obj.options[obj.options.length] = new Option('New York','25');\n";
      echo "obj.options[obj.options.length] = new Option('San Fransisco','26');\n";
      echo "obj.options[obj.options.length] = new Option('Seattle','27');\n";
      
      break;
  }  
}

?>
</body>
</html>

And the Ajax.js:

/* Simple AJAX Code-Kit (SACK) v1.6.1 */
/* ©2005 Gregory Wild-Smith */
/* www.twilightuniverse.com */
/* Software licenced under a modified X11 licence,
   see documentation or authors website for more details */

function sack(file) {
this.xmlhttp = null;

this.resetData = function() {
	this.method = "POST";
  		this.queryStringSeparator = "?";
	this.argumentSeparator = "&";
	this.URLString = "";
	this.encodeURIString = true;
  		this.execute = false;
  		this.element = null;
	this.elementObj = null;
	this.requestFile = file;
	this.vars = new Object();
	this.responseStatus = new Array(2);
  	};

this.resetFunctions = function() {
  		this.onLoading = function() { };
  		this.onLoaded = function() { };
  		this.onInteractive = function() { };
  		this.onCompletion = function() { };
  		this.onError = function() { };
	this.onFail = function() { };
};

this.reset = function() {
	this.resetFunctions();
	this.resetData();
};

this.createAJAX = function() {
	try {
		this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e1) {
		try {
			this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e2) {
			this.xmlhttp = null;
		}
	}

	if (! this.xmlhttp) {
		if (typeof XMLHttpRequest != "undefined") {
			this.xmlhttp = new XMLHttpRequest();
		} else {
			this.failed = true;
		}
	}
};

this.setVar = function(name, value){
	this.vars[name] = Array(value, false);
};

this.encVar = function(name, value, returnvars) {
	if (true == returnvars) {
		return Array(encodeURIComponent(name), encodeURIComponent(value));
	} else {
		this.vars[encodeURIComponent(name)] = Array(encodeURIComponent(value), true);
	}
}

this.processURLString = function(string, encode) {
	encoded = encodeURIComponent(this.argumentSeparator);
	regexp = new RegExp(this.argumentSeparator + "|" + encoded);
	varArray = string.split(regexp);
	for (i = 0; i < varArray.length; i++){
		urlVars = varArray[i].split("=");
		if (true == encode){
			this.encVar(urlVars[0], urlVars[1]);
		} else {
			this.setVar(urlVars[0], urlVars[1]);
		}
	}
}

this.createURLString = function(urlstring) {
	if (this.encodeURIString && this.URLString.length) {
		this.processURLString(this.URLString, true);
	}

	if (urlstring) {
		if (this.URLString.length) {
			this.URLString += this.argumentSeparator + urlstring;
		} else {
			this.URLString = urlstring;
		}
	}

	// prevents caching of URLString
	this.setVar("rndval", new Date().getTime());

	urlstringtemp = new Array();
	for (key in this.vars) {
		if (false == this.vars[key][1] && true == this.encodeURIString) {
			encoded = this.encVar(key, this.vars[key][0], true);
			delete this.vars[key];
			this.vars[encoded[0]] = Array(encoded[1], true);
			key = encoded[0];
		}

		urlstringtemp[urlstringtemp.length] = key + "=" + this.vars[key][0];
	}
	if (urlstring){
		this.URLString += this.argumentSeparator + urlstringtemp.join(this.argumentSeparator);
	} else {
		this.URLString += urlstringtemp.join(this.argumentSeparator);
	}
}

this.runResponse = function() {
	eval(this.response);
}

this.runAJAX = function(urlstring) {
	if (this.failed) {
		this.onFail();
	} else {
		this.createURLString(urlstring);
		if (this.element) {
			this.elementObj = document.getElementById(this.element);
		}
		if (this.xmlhttp) {
			var self = this;
			if (this.method == "GET") {
				totalurlstring = this.requestFile + this.queryStringSeparator + this.URLString;
				this.xmlhttp.open(this.method, totalurlstring, true);
			} else {
				this.xmlhttp.open(this.method, this.requestFile, true);
				try {
					this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
				} catch (e) { }
			}

			this.xmlhttp.onreadystatechange = function() {
				switch (self.xmlhttp.readyState) {
					case 1:
						self.onLoading();
						break;
					case 2:
						self.onLoaded();
						break;
					case 3:
						self.onInteractive();
						break;
					case 4:
						self.response = self.xmlhttp.responseText;
						self.responseXML = self.xmlhttp.responseXML;
						self.responseStatus[0] = self.xmlhttp.status;
						self.responseStatus[1] = self.xmlhttp.statusText;

						if (self.execute) {
							self.runResponse();
						}

						if (self.elementObj) {
							elemNodeName = self.elementObj.nodeName;
							elemNodeName.toLowerCase();
							if (elemNodeName == "input"
							|| elemNodeName == "select"
							|| elemNodeName == "option"
							|| elemNodeName == "textarea") {
								self.elementObj.value = self.response;
							} else {
								self.elementObj.innerHTML = self.response;
							}
						}
						if (self.responseStatus[0] == "200") {
							self.onCompletion();
						} else {
							self.onError();
						}

						self.URLString = "";
						break;
				}
			};

			this.xmlhttp.send(this.URLString);
		}
	}
};

this.reset();
this.createAJAX();
}

I must be doing someing completey wrong.....Any help much appreciated!

Thank You

yandoo · February 3, 2008

Hi there,

I now have 3 files, php code (getCities.php), Ajax.js and HEAD/BODY bit from tutoria.l

I find when opening page in internet explorer an arror message appears on bottom left icon on brower saying: problems with webpage might prevent it from being dislpayed or function properly.

Line: 66

Error: Syntax

Code:0

When i try opening the page in firefox there is no error message but the City drop down doesnt populate after selecting Country on th first.

Do i need to config phph.in in some way for ajax???

Thanks

yandoo · February 3, 2008

Found out what is was, if anybody does the same tutorial!!!!

Basically the page getCities.php Must not contain any other html crap in it. so in my case getCities.php now looks like:

<?php

if(isset($_GET['countryCode'])){

  switch($_GET['countryCode']){
   
    case "no":
      echo "obj.options[obj.options.length] = new Option('Bergen','1');\n";
      echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n";
      echo "obj.options[obj.options.length] = new Option('Oslo','3');\n";
      echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n";
     
      break;
    case "dk":
     
      echo "obj.options[obj.options.length] = new Option('Aalborg','11');\n";
      echo "obj.options[obj.options.length] = new Option('Copenhagen','12');\n";
      echo "obj.options[obj.options.length] = new Option('Odense','13');\n";
     
      break;
    case "us":
     
      echo "obj.options[obj.options.length] = new Option('Atlanta','21');\n";
      echo "obj.options[obj.options.length] = new Option('Chicago','22');\n";
      echo "obj.options[obj.options.length] = new Option('Denver','23');\n";
      echo "obj.options[obj.options.length] = new Option('Los Angeles','24');\n";
      echo "obj.options[obj.options.length] = new Option('New York','25');\n";
      echo "obj.options[obj.options.length] = new Option('San Fransisco','26');\n";
      echo "obj.options[obj.options.length] = new Option('Seattle','27');\n";
     
      break;
  }
}

?>

Hope this helps, if anybody finds them selves in the same predicerment!!!

Thank You

Sign In

[SOLVED] Ajax chained select boxes tutorial

Recommended Posts

yandoo

Link to comment

Share on other sites

yandoo

Link to comment

Share on other sites

yandoo

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information