JQuery Ajax not working in IE10

Ganesh Bhosle picture Ganesh Bhosle · Sep 12, 2013 · Viewed 21.5k times · Source

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

Sunil Verma picture Sunil Verma · Sep 19, 2013

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.