JQuery Ajax not working in IE10

R

8

5

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

Relapse answered 12/9, 2013 at 12:53 Comment(2)

try this on <head> <meta http-equiv="x-ua-compatible" content="IE=9" > – Traditor 22/9, 2013 at 18:48

is the status of the request 'pending' in network tab of dev tools? – Hoggish 23/9, 2013 at 0:5

G

5

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.

Gamba answered 19/9, 2013 at 11:51 Comment(0)

C

3

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. :)

Carola answered 17/9, 2013 at 16:33 Comment(0)

A

1

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

Aerodynamics answered 16/9, 2013 at 13:16 Comment(0)

N

1

Use fiddler to analyse your ajax calls - it'll tell you if the call was made or not for sure.

Nutcracker answered 23/9, 2013 at 0:51 Comment(0)

B

0

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.

Bridwell answered 12/9, 2013 at 13:19 Comment(1)

thanks for your replay. I am developing using salesforce.com. I do not have control over headers. Hence though your answer has potential to solve the problem, I won't be able to even try that. – Relapse 12/9, 2013 at 13:23

A

0

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"

Airing answered 17/9, 2013 at 16:31 Comment(0)

M

0

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;

Mat answered 18/9, 2013 at 19:37 Comment(0)

V

0

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

Verity answered 20/9, 2013 at 21:10 Comment(1)

This is not entirely accurate. jQuery 1.x branch is not for IE 8 and less. It's for IE 6+. jQuery 2.x branch is for IE 9+. – Matzo 4/3, 2014 at 19:40

Recommended topics

Hot tags