how to hide an ajax cascading drop down until fired?

Discussion in 'JavaScript' started by sfraise, Oct 6, 2010.

  1. #1
    I'm playing with a script from http://www.skillfusion.com/articles/ajaxDropdown.php to build a cascading drop down in a form. Ajax is the only real logical way for me to build this as there are a ton of fields and values in here, it goes:
    Country:
    >State or Province
    >>City
    Where the first selector has every country in the world in it, the dependent state selector has all 50 states in the USA and Province has every province in Canada, and city is where the whole thing just gets huge. I've broken the fields in the db down to have each state or province's cities in a separate field, example is for the USA I have fields cb_cityal, cb_cityak, cb_cityar, and so on and so on. So if a person selects Country: United States > State: Alabama >>
    The city drop down would populate with the cb_cityal field values.

    Without building this in ajax where it pulls the data onchange from a separate xml file the form would just simply pull too many fields and values on page load causing either extremely slow load time or a time out, I know, I tried lol.

    The ajax script I'm playing with works fine, except in this solution the dependent drop down selectors are always shown even if blank before fired, then when fired it simply changes the values in the selector box. I need these to only show when the parent drop down value is selected, change the values when selecting a different parent value, and then disappear when not selected.

    Question 1: How do I build the hide function into this script?

    Now, to throw a little twist into the mix...
    This site is being built with Joomla using the Community Builder component, and using an extension for Community Builder called cb profile pro which adds the ability to configure the profile layouts more freely through an html editor. The extension allows you to manipulate the front end view, edit profile view, and registration form and makes the process more simple by taking the fields associated with the CB profiles and putting them into a {fld fieldname} format where all you need to do is type {fld fieldname} into the html editor where you want that field to appear and it gets rendered.
    So now, instead of having to populate the field values in the xml file I want the ajax script to pull from, I simply need it to pull {fld cb_state} when United States is selected in the Country selector, and {fld cb_cityal} when Alabama is selected in the State selector.

    So now that I don't need to populate all of the fields and values maybe I'm going the wrong direction with this ajax script. Maybe I simply need something that will print a line of text like this:
    Country: United States
    >{fld cb_state}
    State: Alabama
    >>{fld cb_cityal}
    Where when the United States is selected in the Country selector it fires to the xml sheet and prints the value {fld cb_state} as text which the cb profile pro extension will then render as the drop down selector for cb_state. Then doing a similar function when Alabama is selected from the State selector it fires to the xml sheet and prints the value {fld cb_cityal} as text which the cb profile pro extension again renders as the drop down selector for cb_cityal.

    2nd Question: Does anyone have a simple ajax script that will print a text value pulled from an xml file when a value is selected from a drop down selector, and only show that text when the trigger is actually selected but hide it when not?

    3rd Question: If going this route where the script simply prints the text and we let the cb profile pro turn that text into the drop down, will we still be able to use that rendered drop down to trigger the next string of text?


    I don't HAVE to use the {fld fieldvalue} method, I can build a regular form and it will work, HOWEVER by NOT using the {fld fieldname} method the user's values that are already selected will not be populated automatically when on the profile edit section, instead the values will all be blank and he will have to completely refill those values every time he edits his profile which is something I want to stay away from. So I really really need to be able to somehow use the {fld fieldname} method instead.
    Here again, I've tried using a simple script to do this without using ajax to pull the values from a separate xml file and it ends up still pulling each and every field and value on the page load making it extremely slow and usually time out. Even though the html code is only showing {fld cb_cityal} when the page gets loaded it looks like the actual code for the field and all of it's option values, and even though all of the other city fields are hidden when not selected they all still get pulled on page load. So even using the {fld fieldname} method it needs to be pulled from a separate xml file and only fired when selected.

    I know this whole thing sounds complicated but it really shouldn't be, I know someone somewhere here knows of the perfect solution for this.
     
    Last edited: Oct 6, 2010
    sfraise, Oct 6, 2010 IP