Firefox 'loading' wheel keeps spinning after iFrame submit

Question

I have a very peculiar issue with Firefox and I've been unable to find out why. Basically I have a system where AJAX is used to submit data to PHP API, but when file uploads are used, then it will not use XMLHttpRequest() and instead falls back to submitting the form.

This is what happens:

• Request is made for file upload
• Javascript finds the form that is used for upload and assigns it to variable apiSubmitForm
• Hidden iFrame is created with a random ID using DOM appendChild() method inside the and is assigned to variable hiddenWindow
• apiSubmitForm method is changed to POST, action is changed to API URL, enctype is changed to 'multipart/form-data' and target is changed to the ID of the hiddenWindow
• hiddenWindow will have an onload() method set, which includes resetting the apiSubmitForm values to what they were in the beginning and also removing the created hiddenWindow in the end of onload().

Now, everything works. There are no JavaScript errors. Data gets submitted and I can actually submit data many times in a row without problems.

But the green and spinning loading wheel on Firefox stays on as it does so. I'm assuming that it is called to close itself after onload event as well, except since hiddenWindow gets deleted in the end of it, it does not work?

This does not happen if I comment out this line from iFrame's onload event:

apiSubmitForm.removeChild(hiddenWindow);

Every other browser (Chrome, Opera, Safari and Internet Explorer) that I tested will not have that loading wheel running. And every browser (Firefox included) works correctly, form gets properly submitted and every other part of the code works as expected.

Is there anything I can do to close the window better? I cannot call that method right after apiSubmitForm.submit() either because that form submit is 'asynchronous' and it would break the loading.

Thanks!

Answer 1

Well, this is the closest I have gotten, it is a complete hack though:

setTimeout(function(){apiSubmitForm.removeChild(hiddenWindow);},1);

(Place this in the iFrame onload event)