View Full Version : Help with cascading drop downs ajax

10-06-2010, 04:09 AM
I'm building a form that needs cascading dependent drop downs.
I'm using Joomla with Community Builder along with an added extension that adds more flexibility to the Community Builder component called cb profile pro.

The added extension uses a format like {fld fieldname} to pull the field data from the database and populate it on the page. So the form I'm building looks like:
{TABS theme=custom-theme}{tab1=Personal}
First Name:
{fld firstname}{fld name}
Middle Name:
{fld middlename}
Last Name:
{fld lastname}
{fld cb_gender}
Date of Birth:
{fld cb_dob}
{fld cb_country}
{fld cb_state}
{fld cb_caprovince}
{fld cb_cityal}City:
{fld cb_cityak}City:
{fld cb_cityaz}City:
{fld cb_cityca}City:
{fld cb_cityco}City:
{fld cb_cityct}City:
{fld cb_cityde}
and so on with the rest of the 50 states...{/tab1}

When the actual form is loaded I need the state or province drop down to only show once the united states or canada is selected in the country drop down field which is {fld cb_country}. As well as I only need the appropriate city selector drop down to show when the related state is shown from the {fld cb_state} field.

My first attempt at this I tried to use a script where I just needed to add a DEPENDS ON field BEING value to the select class of the dependent field in order to only show when the parent value is selected. This works, but the problem is there are so many fields and so many values within those fields that it takes forever to actually load the form if it even loads at all. This is just not efficient enough to use with this.

So then I thought I could use an ajax script where the option values would actually be stored in an external xml file so that not all of the fields and options would be loaded on page load, rather the dependent drop down would only be loaded when selected in the parent with the onchange or onclick event.

I found an ajax script that does what I need, but there is no option for the dependent drop downs to be hidden when not selected, instead if a parent value isn't selected the child drop down value simply shows "select". I also need to be able to use the {fld fieldname} format instead of actually building all of the fields and values in the script. If anyone knows of a way to have the child drop down box to be completely hidden when not selected in the following script please let me know:

// declare a global XMLHTTP Request object
var XmlHttpObj;

// create an instance of XMLHTTPRequest Object, varies with browser type, try for IE first then Mozilla
function CreateXmlHttpObj()
// try creating for IE (note: we don't know the user's browser type here, just attempting IE first.)
XmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
XmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
XmlHttpObj = null;
// if unable to create using IE specific code then try creating for Mozilla (FireFox)
if(!XmlHttpObj && typeof XMLHttpRequest != "undefined")
XmlHttpObj = new XMLHttpRequest();

// called from onChange or onClick event of the continent dropdown list
function cb_countryOnChange()
var cb_country = document.getElementById("cb_country");

// get selected country from dropdown list
var selectedCountry = cb_country.options[cb_country.selectedIndex].value;

// url of page that will send xml data back to client browser
var requestUrl;
// use the following line if using asp
// requestUrl = "xml_data_provider.asp" + "?filter=" + encodeURIComponent(selectedCountry);
// use the following line if using php
requestUrl = "xml_data_provider.php" + "?filter=" + encodeURIComponent(selectedCountry);


// verify XmlHttpObj variable was successfully initialized
// assign the StateChangeHandler function ( defined below in this file)
// to be called when the state of the XmlHttpObj changes
// receiving data back from the server is one such change
XmlHttpObj.onreadystatechange = StateChangeHandler;

// define the iteraction with the server -- true for as asynchronous.
XmlHttpObj.open("GET", requestUrl, true);

// send request to server, null arg when using "GET"

// this function called when state of XmlHttpObj changes
// we're interested in the state that indicates data has been
// received from the server
function StateChangeHandler()
// state ==4 indicates receiving response data from server is completed
if(XmlHttpObj.readyState == 4)
// To make sure valid response is received from the server, 200 means response received is OK
if(XmlHttpObj.status == 200)
alert("problem retrieving data from the server, status code: " + XmlHttpObj.status);

// populate the contents of the cb_state dropdown list
function Populatecb_state(stateNode)
var cb_state = document.getElementById("cb_state");
// clear the state list
for (var count = cb_state.options.length-1; count >-1; count--)
cb_state.options[count] = null;

var stateNodes = stateNode.getElementsByTagName('state');
var idValue;
var textValue;
var optionItem;
// populate the dropdown list with data from the xml doc
for (var count = 0; count < stateNodes.length; count++)
textValue = GetInnerText(stateNodes[count]);
idValue = stateNodes[count].getAttribute("id");
optionItem = new Option( textValue, idValue, false, false);
cb_state.options[cb_state.length] = optionItem;

// returns the node text value
function GetInnerText (node)
return (node.textContent || node.innerText || node.text) ;

10-06-2010, 03:28 PM
Despite the similar sounding names, Java is not the same as Javascript.
Moving from Java to Javascript > AJAX forum.