Incorrect jqXHR response for Jquery Forms Plugin in IE8 and 9

Question

I've got an unusual problem that I've only been able to replicate in IE8 and 9 - I've tested Safari, Chrome (both on a Mac, Firefox (on a PC) and IE8, 9 and 10.

I have the following code:

$('#fileStore_newUpload').ajaxForm({
        beforeSubmit: function(arr, $form, options){
            options.context = $form;
        },
        dataType:'xml',
        success: function(responseXML,status,jqXHR){
            alert(jqXHR.responseText);
            var xmlDoc = $.parseXML(jqXHR.responseText);
            $xml = $( xmlDoc );
            alert($xml.find("uploadSuccess").text());
            alert($(responseXML).find('uploadSuccess').text());
        }
    });

In all browsers but IE8 and 9, the first alert() function brings up the following, expected, response.

<?xml version="1.0" encoding="utf-8" ?>
<files>
<file name="TPHP041879.pdf">
<uploadSuccess>1</uploadSuccess>
<filePath>/uploads/2013/09/TPHP0418798.pdf</filePath>
</file>
</files>

However, in IE8 and 9, I get some of the HTML of the page that contains in the fileStore_newUpload element. For example:

<div id="admin_topBanner">
<span><a href="../index.php">Site Title</a></span>
....

Using IE9's debugging tool, I can see that the response body for the network request contains the appropriate content and the request is sent via POST. (Checked as a result of this post). I can also see that the response has "Content-Type application/xml; charset=utf-8" set - which is what I believe is correct for the response.

My form is as follows:

<form id="fileStore_newUpload" action="<?php echo $portalOptions['site_url']; ?>/ajax/fileUpload.php" enctype="multipart/form-data" method="POST">
                <label>File</label><br /><input type="file" name="fileDocument"><br />
                <button type="submit" form="fileStore_newUpload">Upload File</button>
            </form>

I thought this issue may be as a result of http://bugs.jquery.com/ticket/13388 but I've tested with Jquery 1.9.0, 1.9.1 and 1.10.2 and have found the issue present across all versions.

I think this is the same issue as the one raised here, but I'm not quite sure: https://stackoverflow.com/questions/17473719/jquery-form-plugin-the-server-generates-correct-json-response-but-ie-receives

Any assistance would be appreciated.

Answer 1

I (think I) finally worked out what was going on here - after a few attempts.

Two things may have contributed to this problem in Internet Explorer 8 and 9:

• For security, I had my application set all X-Frame-Options headers to deny. I changed this to SAMEORIGIN for my AJAX response scripts (only). This link helped greatly in working this out.
• IE seemed to go into Quirks mode (as opposed to Standards Mode) for all Content-Type headers other than "Content-type: text/html; charset=utf-8" for the XML responses, which appeared to break IE8 in particular. This breaks JQuery's

The two lines of PHP that I used to rectify this were:

1. header("X-Frame-Options: SAMEORIGIN");
2. header("Content-type: text/html; charset=utf-8");

Hope this helps someone!