jQuery MVC3 AJAX Callback to update DropDownList not working in IE6

Question

I have the following jQuery to update a drop down list based on the selected value of another drop down list:

$("#FirstDropDownList").change(function () {
    $.get('/MyController/GetSecondDropDownListValues/' + $(this).val(), function (response) {
        var ddlValues = $.evalJSON(response);
        var ddlSecondDropDownList = $("#SecondDropDownList");

        // clear all previous options 
        $("#SecondDropDownList> option").remove();

        // populate the values of SecondDropDownList
        for (i = 0; i < ddlValues.length; i++) {
            ddlSecondDropDownList.append($("<option />").val(ddlValues[i].Id).text(ddlValues[i].Name));
            }
    });
});

It seems the callback only works when the submit button is pressed.

It seems the browser is throwing a 404 error. It works fine in Chrome, IE7+, Firefox etc. Unfortunately our client uses IE6.

Possible duplicate of [http://stackoverflow.com/questions/208471/getting-jquery-to-recognise-change-in-ie][1]. Try using click instead of change. [1]: http://stackoverflow.com/questions/208471/getting-jquery-to-recognise-change-in-ie — danludwig, Dec 14 '11 at 04:36
Never ever use static definition of paths in mvc3! Use @Url.Action("GetSecondDropDownListValues") instead! — Gumowy Kaczak, Dec 14 '11 at 08:39

score 0 · Answer 1 · answered Dec 14 '11 at 04:53

To answer my own question, it seemed that IE6 wasn't resolving the path correctly. I altered it to remove the controller name from the path:

$.get('GetSecondDropDownListValues/' + etc

This seemed to fix it in both IE6 and newer versions of IE.

I have another issue where the callback shortens the width of the second drop down list (they're both set to 100%). Giving them a specific width fixes it, but it's not ideal. Oh, the pain.

jQuery MVC3 AJAX Callback to update DropDownList not working in IE6

1 Answers1