CODEWITHSUNDEEP
jqueryinternet-explorer-10jquery-file-uploadjquery-forms-plugin
ClassCastException
ClassCastException

Reputation: 1473

JQuery Ajax not working in IE10

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

Upvotes: 5

Views: 21659

Answers (8)

Dave Hilditch
Dave Hilditch

Reputation: 5439

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

Upvotes: 1

QuadRunner
QuadRunner

Reputation: 1

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

Upvotes: 0

Sunil Verma
Sunil Verma

Reputation: 2500

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.

Upvotes: 5

Nick
Nick

Reputation: 1167

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;

Upvotes: 0

TheAshwaniK
TheAshwaniK

Reputation: 1826

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

Upvotes: 3

Daniel Schwarz
Daniel Schwarz

Reputation: 284

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"

Upvotes: 0

amrinder007
amrinder007

Reputation: 1475

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

Upvotes: 1

Pranav Singh
Pranav Singh

Reputation: 20091

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.

Upvotes: 0

Related Questions