JQuery Ajax not working in IE10

Question

Background

I want to submit a form, stay on the same page & get the response.

Below mentioned code works perfectly in Chrome, Safari & Firefox. However It doesn't work in IE10.

How to make it work in IE10?

My Analysis correctness="questionable"

In IE10, $('#amazonUpload').ajaxSubmit(options) is executed, however No Ajax request is received at Server, hence response is never received at client.

HTML

<form action="https://s3.amazonaws.com/adminportal" enctype="multipart/form-data" id="amazonUpload" method="post">   
    <input name="key" type="hidden" value="001e0000009vkRLAAY/Forms/${filename}" />             
    <input name="AWSAccessKeyId" type="hidden" value="client aws key" /> 
    <input name="policy" type="hidden" value="really long string" /> 
    <input name="signature" type="hidden" value="sign value=" />             
    <input name="acl" type="hidden" value="private" /> 
    <input name="Content-Type" type="hidden" value="application/octet-stream"/>
    <div id="uploadPage:block:j_id31"><div class="pbSubsection">      
    <input id="uploadfileOne" name="file" required="True" size="25" type="file" />
    <input class="btn" id="myBtnId55" name="myBtnId55" onclick="uploadActComplete();" style="display:none;" type="button" value="Upload" />     
</form>

JavaScript

function uploadActComplete(){
    loading();     
    var options = { 
    //      error: errorResponse,
    //       success: successResponse,
    complete: function(xhr, status) {
        alert('status is :- '+status );
        if(status =='success')
            successResponse(xhr, status);
        else if(status =='error')
            errorResponse(xhr, status);
    }
    }; 
    $('#amazonUpload').ajaxSubmit(options); 
    return false;
}

function errorResponse(xhr, status)  {     
    stoploading();    
    alert('File could not be uploaded, please try again.'); 
} 
function successResponse(xhr, status)  {     
    stoploading();    
    $("input[id$='invisiblesubmit']").click();
}

Answer 1

I have tried replicating your code on my system. and it works like a charm..

i have used following jquery files to achieve the above functionality.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script src="http://malsup.github.com/jquery.form.js"></script>

Please check if you are using correct jquery files.

I have also tried posting to a local file and ajax request was correctly received there.

Answer 2

Did you try this?

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" >

More info here: http://code.gishan.net/code/solution-to-ie10-ajax-problem/

@Daniel Schwarz, also answered. :)

Answer 3

Try adding meta tag inside head tag of your page which worked for me:-

<meta http-equiv="x-ua-compatible" content="IE=9" >

IE10 works like IE9

Answer 4

使用fiddler来分析你的ajax调用 - 它会告诉你调用是否成功。

Answer 5

I faced the similar situation with IE 10 only. In subsequent request with no change in parameter is not sent to server & considered as cached one.

The solution in my case was to sending back a Cache-Control: no-cache header from your server. It provides a cleaner separation of concerns.

In ASP.Net I need to add

HttpContext.Current.Response.AddHeader("Cache-Control", string.Empty);

Or

HttpContext.Current.Response.AddHeader("Cache-Control", "no-cache");

OR

Response.AppendHeader("Cache-Control", "no-cache; private; no-store; must-revalidate; max-stale=0; post-check=0; pre-check=0; max-age=0"); // HTTP 1.1
Response.AppendHeader("Pragma", "no-cache"); // HTTP 1.1    

It resolved the problem.

Answer 6

A follow up to @amrinder007's answer, you could try this slight variation

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

Else there are other options that might work:

"IE=edge"
"IE=10"
"IE=EmulateIE10"
"IE=9"
"IE=EmulateIE9
"IE=8"
"IE=EmulateIE8"
"IE=7"
"IE=EmulateIE7"
"IE=5"

Answer 7

You could append a timestamp to the end of URL being requested as a GET parameter. This is how I've gotten around IE's caching.

var date = new Date();
var options = { 
    url: $('#amazonUpload').attr('action')+'?time='+date.getTime(),
    // Your other options
}
$('#amazonUpload').ajaxSubmit(options); 
return false;

Answer 8

The biggest problems I have found with IE 10+ is the version of JQuery that you use. Since you haven't said which version you are using you should verify that you are using a JQuery 2.X version.

The Jquery 1.X Branch is for IE Browsers version 8 or less. The JQuery 2.X branch is for IE9+ browsers, Chrome, and FF. I haven't tried it with Safari.

Also verify that the version of Jquery Forms you are using is compatible with JQuery 2.x

For more information read the information on the JQuery download page at jquery.com/download