IE issue with a combination of taconite & ajaxForm with file upload

Question

I've a form with file upload and below a grid which lists the files uploaded. I'm using ajaxForm (jquery.form.js) to perform an ajax file upload. In response to the successful file upload, I expect a security-code (I create it on server) returned from server which is later passed as an argument while downloading that file from the link in Grid.

If the file upload was unsuccessful (i.e. invalid file or over sized files) I've to notify the user about the same. I use the taconite plugin for the same. A successful upload will show the message and then invoke a function to set the security code in the grid. If unsuccessful show message to user and invoke function to remove the upload entry from Grid (because it was unsuccessful)

I've similar mechanism for deleting fiel from the Grid - delete post request is sent ($.post(...)) and taconite result is returned from server. This works just fine as expected. But the .ajaxForm (with file upload) doesn't work as expected with IE.

Here's the snippet from ajaxForm call -

success: function (responseXML, statusText, xhr, frm) { ... }

With FF(Firefox) I don't have to worry about anything - the taconite response (comes in responseXML) is parsed correctly. But with IE responseXML is xml object. Some versions of IE give xml text from xhr.responseXML.xml or xhr.responseXML.text or xhr.responseXML.documentElement.textContent - but its not consistent. Anyway to get xml text?

Besides this still doesn't invoke / execute the taconite plugin operations even if I manually set the xml content in a temp div!

I know this sounds complex but the only clue I've got is that it has issues with ajaxForm + taconite + file upload. If its not file upload then the taconite executes as expected for both IE & FF (like my delete file feature). Pleas share if you've any suggestions that I can tweak and try out!

---

Here's a sample taconite returned -

<taconite>
<replaceContent select="#fileOprMsg">
<span id="oprResult">Operation was successful<span class="error"></span></span>
<script>$().ready(function () { showOprResult('#oprResult', 1); });</script></replaceContent>
<eval><![CDATA[ fileUploadResponse('dcrc%22uycok0lri%3d9%3a3g%3a6%3a%3b%2f7ehd%2f6chf%2f%3a6de%2fghgcg4c7dgh4%3dVtwg',true,-1); ]]> </eval>
</taconite>

Answer 1

Pheew .. this has been one of the most notorious IE v/s FF conflicts I've ever faced and IE would NOT give up! I tried everything from trying to parse the xhr.responseXML element to dynamically assigning its content to a hidden element even tried to render it as script but all failed.

Finally, after frustrating days I moved my efforts to the actual taconite plugin file and reviewed its script trying to find some function / method that I can leverage and bingo!

I don't know how stable / legal this is but it works for me -

$('#frmFiles').ajaxForm({
                dataType: 'xml',
        ...
        success: function (responseXML, statusText, xhr, frm) {
            ...
            /* FF gives xml string in - xhr.responseText */
            ...
            if (xhr.responseXML != null){
                var tc = new $.taconite(responseXML); // only for IE
            }
        ...
        });

What I've done here is explicitly initialize a taconite instance with the responseXML and hats off to the taconite plugin which handles the xmlObject and / or xml text without any extra specifications. Thw following does all the magic -

var tc = new $.taconite(responseXML);

Mind well - this is ONLY for IE, FF handles it v.well so to prevent the above code from being executed in FF I had to keep extra IE specific checks.

I've tested it in IE7, 8 & 9. Hope this saves some effort of people in a similar IE dilemma :) Oh! and if someone find a better solution - I'm all ears!

Thank you.