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

Question

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.

Answer 1

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.

Answer 2

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);

Answer 3

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