Question

I have this MVC form with 2 dropdownlist where selection on the first dropdown should update the second one through an AJAX call.

Form looks as follows:

<%using (Ajax.BeginForm("GetChildren", "Home", null, new AjaxOptions { UpdateTargetId = "result" }, new Dictionary<string, object> { { "id", "someForm" } }))
{ %>
<%= Html.DropDownList("masterSelection", new SelectList((IList<Master>)ViewData["Master"], "MasterName", "MasterName"))%>
<span id="result">
    <%Html.RenderPartial("ChildSelection");%>
</span>
<% } %>

With following JQuery script:

$(function () {
    $("#masterSelection").change(function () {
        $("#someForm").submit();
    });
});

This translates to the following client side HTML

<form action="/Home/GetChildren" id="someForm" method="post" onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));" onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: &#39;result&#39; });">

If I get it right the onsubmit should take care of the AJAX call and also prevent the normal behavior of the form (a full refresh).

Now everything works fine in Firefox but in IE it seems the default behavior is not canceled resulting in an AJAX call (caused by the onsubmit code of the form) and second a full refresh of the page.

Obviously not what I want.

When I debug the onsubmit javascript code it comes down to a method in the MicrosoftAjax.js file which should cancel the default post behavior of my form.

function Sys$UI$DomEvent$preventDefault() {
    /// <summary locid="M:J#Sys.UI.DomEvent.preventDefault" />
    if (arguments.length !== 0) throw Error.parameterCount();
    if (this.rawEvent.preventDefault) {
        this.rawEvent.preventDefault();
    }
    else if (window.event) {
        this.rawEvent.returnValue = false;
    }
}

While debugging with IE I get to the line this.rawEvent.returnValue = false; which should be correct for cancelling an event in IE but apparebtly this is not working for me.

I’ve already worked out a alternate solutions where I use jQuery to fire an AJAX-call and build the new dropdownlist client-side or another where I add an invisible button to the form to call it’s click event in the change event of the first dropdown but I still want to use the first one (cleanest imo).

Any advice?

S.

Answer 1

I’ve done some more searching and I came up with the following which isn’t as good as simple calling the $("#someForm").submit(); but which I still prefer over building the dropdownlist client side after an AJAX call or calling the click on a hidden button.

I’ve removed the Ajax.BeginForm from the page.

<%= Html.DropDownList("masterSelection", new SelectList((IList<Master>)ViewData["Master"], "MasterName", "MasterName"))%>
<span id="result">
    <%Html.RenderPartial("ChildSelection");%>
</span>

And use the jquery load method to change the content of my second dropdownlist

    $(function () {
        $("#masterSelection").change(function () {
            $('#result').load("Home/GetChildren", { masterSelection: this.value });
        });
    });

I found this method thanks to the following post:Render partial form in jQuery dialog

This works for both IE and FF for me.

I still would like to know why my first code doens’t work in IE.