CODEWITHSUNDEEP
formsjqueryinternet-explorer-9
painotpi
painotpi

Reputation: 6996

jquery.form.js is not working in Internet Explorer 9

I have a simple form with a file upload control. The form will be posted once I click on the upload button. I'm trying to do a jquery-ajax post, using the jquery.form.js.

My code is as follows,

var options = {
    beforeSubmit: function (formData, jqForm, options) {
        $(".loaderImage").show();
        return true;
    },
    success: function (responseText, statusText, xhr, $form) {
        $("#result").html(responseText);
    },
    error: function(xhr) { alert(xhr.responseText); }
};
$("#AjaxFileUpload").ajaxSubmit(options);
return false;

It works fine in Google Chrome, Firefox and Internet Explorer 10. The problem with Internet Explorer 9 is, after debugging, it doesn't enter the success(). Any pointers on what's going wrong? There are no errors in the console either.

I added the error option as well, but the issue is the same, the breakpoint doesn't hit the alert.

I just had a look at the network traffic. There is no POST request going (in Internet Explorer 9) when I click the upload button, but there's a POST request going in Internet Explorer 10.

I cleared the cache and reset browser settings as well. But the issue persists.

Upvotes: 4

Views: 4605

Answers (3)

5z- -
5z- -

Reputation: 161

Your code is working fine on my computer, and I'm using Internet Explorer 9. Maybe the problem is not here.

Upvotes: 0

cmw
cmw

Reputation: 855

badZoke, I was experiencing this same problem yesterday and most of today and finally figured out what was causing it (in my case). This might be helpful for your situation, as well:

Internet Explorer has restrictions about form submission when the form is not currently in the DOM. In my case, a user interacted with a button in a modal popup (which also contained the form). When they clicked, the form was removed from the DOM (but still accessible via a js var) and replaced with a loading bar. I then called myForm.ajaxSubmit(options); which in IE<10 attempts a submission of that form to a temporary <iframe/>. Not allowed unless the form is in the DOM.

If your code above was a simplification of your actual scenario and you were doing something similar to me, this may be your problem. Best of luck.

Upvotes: 1

Strelok
Strelok

Reputation: 51461

The first step would be to see if the error callback is invoked:

var options = {
    beforeSubmit: function (formData, jqForm, options) {
        $(".loaderImage").show();
        return true;
    },
    success: function (responseText, statusText, xhr, $form) {
        $("#result").html(responseText);
    },
    error: function(xhr) { alert(xhr.responseText); }
 }; 

$("#AjaxFileUpload").ajaxSubmit(options);

Upvotes: 0

Related Questions