jQuery.form submitting issues with IE (7-9, possibly 10)

Question

I'm trying to get a form submission work in IE. What I have works in Chrome, FF, Opera and Safari. I believe it works in IE10 as well, but I don't have the equipment here to test that out again (I've tested this before in IE10, it worked fine. I've made some changes to the page, but I'm pretty sure the changes didn't impact this form).

Basically, I have form that submits a record but is submitted with the jquery.form control:

<form action="@Url.Content("/ActivitySubmission/SubmitWork")" class="activityForm" id="formId-@(item)" method="post">

and the jQuery code to handle the submit:

$(".activityForm").submit(function (e) {
        e.preventDefault();

        var parts = $(this).prop("id").split("-");
        var activityTemplateId = parts[3];
        var resultsDivId = "#activityResults" + activityTemplateId;
        var msg = '<div style="height:40px; margin-right:20px; float:left;"><img src="/Content/Images/loadingSpinner.gif" /></div>' +
            'Saving your work...<div style="clear:both;"></div>';
        $(resultsDivId).html(msg).slideDown();

        var action = $(this).prop("action");

        $(this).ajaxSubmit({
            url: "/ActivitySubmission/SubmitWork",
            data: {activityTemplateId: activityTemplateId},
            iframe: true,
            target: resultsDivId,
            dataType: 'json',
            success: function (data, textStatus, jqXHR) {
                var parts = data.split("|");
                var status = parts[0];
                var message = parts[1];
                $(resultsDivId).html('<div class="activitySuccess">' + message.replace("\"", "") + '</div>');

                $("#reloadReminder").fadeIn("1200");

                return false;
            },
            error: function(jqXHR, textStatus, errorThrown){
                $(resultsDivId).html('<div class="activityError">Sorry, unable to act on your save or submit command.  Please let the monitor know.</div>');
                alert(errorThrown);
                return false;
            }
        });

        return false;
    });

In IE, the form will post, and run the code in the controller (/ActivitySubmission/SubmitWork) BUT when it comes back to the page, it doesn't run the "success" method of the .ajaxSubmit({...}); it just gives me a "save/open/run" dialog:

Any thoughts as to why this is happening in IE and how I can change this?

Answer 1

If you're getting the "save/open/run" dialog unexpectedly on an ajax call, it means that the server is not providing the correct mime-type information in the HTTP headers, so the browser is mis-identifying the response as a file that needs to be downloaded.

You need to add a HTTP header that specifies the kind of data being sent. For example, in this case it looks like you're sending an HTML snippet, so send a header that specifies text/html .

Hope that helps.