Search code examples
jqueryajaxjsonselectchained

jQuery ajax chained selected not working (Darn you IE!) but works perfectly in FF


I have a form where the user enters a 6 digit number and clicks the retrieve button. An ajax call is performed which returns another form of data (no page refresh). Within the data returned is a chained select (more than one if more than one item is returned). Below is the ajax code.

$(".platform").live("change", function() {
    alert('Updating models...');
    var firstOption = $(this);
    if (firstOption.closest('tr').find('.platform').val() == '')
        {
            firstOption.closest('tr').find('.model').html('<option value=""></option>');                
        }
    else
        {
            firstOption.closest('tr').find('.model').html('<option value="">Updating...</option>');
            $.getJSON("dataCalls/getModels.cfm",{platform: $(this).val()},      
            function(j){
                var options = '';
                for (var i = 0; i < j.length; i++) 
                    {
                        options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
                    }
            firstOption.closest('tr').find('.model').html(options).effect("highlight", {}, 3000);
            });
        }
});

This is working great in FF but not in IE7. I haven't tested in IE 8. Our company standards are still 7 though we are migrating to 8 so it needs to work in 7.

Here is the code which should be triggering the ajax call.

<th class="form"><label>Platform / Model</label></th>
        <td> <select class="platform required" name="platform">
                <option ></option>
                <cfloop query="rsPlatform">
                    <option value="#rsPlatform.optionValue#" <cfif rsRequestSystems.platform eq rsPlatform.optionValue>selected</cfif>>#rsPlatform.optionValue# - #rsPlatform.optionDesc#</option>
                </cfloop>
            </select>
            &nbsp; / &nbsp;
            <select class="model required" name="model">
                <option selected></option>
                <cfloop query="rsModels">
                    <option value="#rsModels.optionValue#" <cfif rsRequestSystems.model eq rsModels.optionValue>selected</cfif>>#rsModels.optionDesc#</option>
                </cfloop></select></td>

Solution

  • I'm answering my own question since I found a work around.

    I found this link which references livequery which resolved my issue.

    $(".platform").livequery("change", function() {
        var firstOption = $(this);
        alert('Updating Modules 302');
        if (firstOption.closest('tr').find('.platform').val() == '')
            {
                firstOption.closest('tr').find('.model').html('<option value=""></option>');                
            }
        else
            {
                firstOption.closest('tr').find('.model').html('<option value="">Updating...</option>');
                alert('Updating Modules 310');
                $.getJSON("index.cfm?do=misc.getModels",{platform: $(this).val()},      
                function(j){
                    var options = '';
                    for (var i = 0; i < j.length; i++) 
                        {
                            options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
                        }
                firstOption.closest('tr').find('.model').html(options);
                });
            }
    });