How to enable/create elements on the fly

Question

Hi all

I am using a combination of PHP, jQuery and Spry to serve a series of listboxes in which a user will select first the type of vehicle, then the make, then the model and finally the specific model.

All my listboxes (SELECT) are working fine, and they update properly using the Spry elements. Each listbox is populated from a different Spry XML Dataset, and this is my problem.

If I present all four listboxes to the user, the script has to go and fetch all four lots of XML to populate all four listboxes, taking several seconds. What I want to do is to create/enable the listboxes in order, so at the user selects from the first listbox, the second is created/enabled, when they select from the second, the third is created/enabled... and so on.

Setting the disabled attribute is no good because the script has already fetched the XML before this is processed.

Any ideas??

Si

UPDATE -- Sorry guys, don't think I made my problem quite clear.

At the top of my script I declare four Spry XML data set variables, each of which goes off (when required) and performs a complex SOAP query against a service, this service then returns a chunk of XML. Each query is dependant on the last, so once the user has selected the type of vehicle, the second data set is refreshed to give an accurate list of manufacturers. When they select the manufacturer, the third list is refreshed to give an accurate list of models for that manufacturer. When they select the model, the list of model derivatives is refreshed for that model (fourth list).

Further down my script I have four SELECT's, each of which is populated with the data from the spry queries. Now, the user must choose the desired option from each list in turn in order to get the right model in the final box. What I want to do is ONLY populate the first box when the page is generated, then populate (or create??) the second, third and fourth boxes when the user selects the desired value in each, much like happens in the Autotrader website (www.autotrader.co.uk).

As I said in the initial posting, I can't use the 'disabled' attr, or even the jQuery show() and hide() functions, as these do not fire until AFTER all four datasets have been fetched and populated into the SELECT's. I need something which ideally creates the elements from scratch as and when required, to stop the four lots of XML being fetched at the beginning...

Hope this clarifies

Answer 1

Instead of disabling them, why not just hide/show using jQuery? .hide() .show(),

Answer 2

$('option').click( function() {
    if($(this).val() != 'Select one...'){
        $(this).next('select').attr('enabled', 'enabled');
        $(this).next('select ~ select').attr('disabled', 'disabled');

        /* or */
        $(this).after('<!-- Generated select/option HTML -->').nextAll('select').remove();
    }
}

This is wholly untested, but according to the API, may work. I'm not sure I understand your question completely, but if you're looking to enable the next option after selection and disable the options after that until the next option is clicked, this is would be your ticket if it works.

If it's a matter of adding (or removing) them dynamically, you can just use the .after and .nextAll methods to add and pinpoint select boxes for removal.

UPDATE: Whoopsie. Had the wrong selectors.

Answer 3

I'm not sure I know what you're asking but it seems like you're looking for something like:

$("#select1").bind("change",function() {
    var sel=$(this).attr("value");
    $.ajax({
        url:sel + ".xml",
        dataType:"xml",
        success:function(xml) {
            $(xml).children("option").each(function() {
                $("<option />",attr:{ value:$(this).attr("value") }).text($(this).text()).appendTo("#select2");
            });
        }
    });
});

Am I way off base here? I mean, that's just a rudimentary way of going about it (and probably has a billion holes), but you want this updating live, right? You don't want it fetching all the XML on page load, right? You could also change $("#select1") to $("#formname select").each(function() { and then have it pick the .next("select") to append it to after fetching the XML.

I'll confess, I've never really used Spry. I've seen it in use a little and it seemed like I could do what I needed to using jQuery.