JavaScript: ajaxSubmit error

Question

I have the following JS function triggered by a button:

function uploadPicture( ) {
    $("form#pictureUpload").ajaxSubmit({
        data: $("form#pictureform").serialize(),
        type: 'post',
        url: '?action=loadpicture',
        success: function(response) {
            $('#div-pictures').html(response);
        }
    }); 

}

This worked perfectly fine for several months. But it stopped working today in Firefox, Safari, Chrome and Opera - although it still works correctly in Internet Explorer.

Safari gives me the following mysterious error:

    Failed to load resource: cancelled       ?action=loadpicture

Chrome outputs almost the same (without : cancelled). Opera and Firefox show no error at all. The only additional information is that the errors above occur after the file upload is finished and although the server generates an HTML output as feedback which is ignored by the browsers.

Please let me know if you have any idea how to fix this. I've been running in circles for hours without even coming close to a solution - I simply see no errors in the code nor in the log files. Many thanks!

Answer 1

It took me a while, but I finally figured it out. One of our admins added to the Apache configuration:

Header append X-FRAME-OPTIONS "DENY"

Which caused an issue on certain browser because of the iframe usage described at http://jquery.malsup.com/form/#file-upload. After changing it to the following everything is working again (no code changes!):

Header append X-FRAME-OPTIONS "SAMEORIGIN"

Anyway, the error message on Safari & Chrome are cryptic. The strange behaviour without any error message on the others browser is even worse.