Google Chrome: XMLHttpRequest.send () does not work when doing POST

Question

I am working on an application that allows the user to submit a file using a form (POST request) and performs a series of GET requests while this file is being downloaded to collect information about the download status.

It works great in IE and Firefox, but not so much in Chrome and Safari.

The problem is that even if send () is called in the XMLHttpRequest object, nothing is requested, as seen in Fiddler.

To be more specific, the event handler is placed in the “submit” event of the form, which places the call to the timeout function in the window:

window.setTimeout(startPolling, 10); 

and in this function, the startPolling sequence is started, which allows you to run GET requests to receive status updates from the web service, which returns the text / json that can be used to update the user interface.

Is this restriction (possibly safe?) In WebKit-based browsers? Is this a Chrome bug? (I see the same behavior in Safari, though).

Answer 1

I have the same problem. I am currently using an iframe that targets the form. This allows you to execute xhr requests during publishing. While this works, it does not degrade gracefully if someone disables javascript (I could not load the next page outside the iframe without js). Therefore, if someone has a more pleasant solution, I would appreciate it if I heard it.

Here's the jQuery script for reference:

 $(function() { $('form[enctype=multipart/form-data]').submit(function(){ // Prevent multiple submits if ($.data(this, 'submitted')) return false; var freq = 500; // freqency of update in ms var progress_url = '{% url checker_progress %}'; // ajax view serving progress info $("#progressbar").progressbar({ value: 0 }); $("#progress").overlay({ top: 272, api: true, closeOnClick: false, closeOnEsc: false, expose: { color: '#333', loadSpeed: 1000, opacity: 0.9 }, }).load(); // Update progress bar function update_progress_info() { $.getJSON(progress_url, {}, function(data, status){ if (data) { var progresse = parseInt(data.progress); $('#progressbar div').animate({width: progresse + '%' },{ queue:'false', duration:500, easing:"swing" }); } window.setTimeout(update_progress_info, freq); }); }; window.setTimeout(update_progress_info, freq); $.data(this, 'submitted', true); // mark form as submitted. }); });