Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    175
    Thanks
    3
    Thanked 1 Time in 1 Post

    Help with cascading drop downs ajax

    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}
    Gender:
    {fld cb_gender}
    Date of Birth:
    {fld cb_dob}
    Country:
    {fld cb_country}
    State:
    {fld cb_state}
    Province:
    {fld cb_caprovince}
    City:
    {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:
    Code:
    // 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.)
    	try
    	{
    		XmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
    	}
    	catch(e)
    	{
    		try
    		{
    			XmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
    		} 
    		catch(oc)
    		{
    			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);
        
    	CreateXmlHttpObj();
    	
    	// verify XmlHttpObj variable was successfully initialized
    	if(XmlHttpObj)
    	{
            // 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"
    		XmlHttpObj.send(null);		
    	}
    }
    
    
    // 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)
    		{			
    			Populatecb_state(XmlHttpObj.responseXML.documentElement);
    		}
    		else
    		{
    			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) ;
    }

  • #2
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,987
    Thanks
    4
    Thanked 2,660 Times in 2,629 Posts
    Despite the similar sounding names, Java is not the same as Javascript.
    Moving from Java to Javascript > AJAX forum.
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 

  • Users who have thanked Fou-Lu for this post:

    sfraise (10-06-2010)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •