Using jQuery version 1.7.2, I am currently using the submit() method to send a form via POST. This triggers a Python cgi-bin script that performs some tasks which may take around ten seconds to finish. Upon completion of the task, the Python script instructs the browser to download data, for example:
print "Content-Type: text/plain"
print "Content-Disposition: attachment; filename=" + some_filename
print "Content-Description: File to download\n"
print some_stuff
Although the script works well, it causes the user interface of the browser to freeze while waiting for the Python script to complete its job, restricting any actions by the end user.
I am looking for a way to submit the form asynchronously so that the user can continue interacting with the UI while the Python script carries out its tasks.
If that is not possible, I would like to know how to set up an activity indicator during form submission and upon completion of the process.
For example, I attempted to override the submit() function handler, but my approach was unsuccessful:
$('#my_form').submit(function(e) {
$.ajax({
type: 'POST',
url: $(this).attr("action"),
data: $(this).serializeArray(),
beforeSend: function() {
/* show an activity indicator div on the browser window */
},
complete: function() {
/* hide the activity indicator div */
}
});
});
Upon submitting the form, the beforeSend and complete functions are executed immediately, rendering this method ineffective in providing visual cues indicating that the browser is busy. Are there alternative methods that can achieve this?