Show progress mask when HTML form post back and downloads file
Question
I am newbie to javascript and HTML. I am working on to show busy image while my html form is post back and download the file. I am using http://malsup.com/jquery/form/#options-object plugin. I am using IE 9. I am posting back a form and in return receive a file.
When I am posting back I see the busy mask then IE ask me to save as the file but the mask doesn't go away. No success/Error callback is getting called. Below is the snapshot of my code.
Highly appreciate your guidance in resolving this.
`frmExport.html
<head>
<script src="js/jquery-1.8.0.js"></script>
<script src="js/jquery.form.js"></script>
<script src="js/frmExport.js"></script>
</head>
<body onload="......">
<form id="frmExport" onsubmit="return exportFile();" enctype="multipart/form-data" method="post">
<fieldset>
<legend class="cuesGroupBoxTitle">Export File</legend>
<table border="0" cellpadding="0" cellspacing="8">
<tr>
<td width="50%">Export File:</td>
<td><input type="submit" id="ExportFileButton" value="Export" /></td>
</tr>
</table>
</fieldset>
</form>
</body>
frmExport.js
function exportSuccess(responseText, statusText, xhr, $form)
{
hideMask("exportFile");
alert(statusText");
}
function exportError()
{
hideMask("exportFile");
alert("An error occurred while exporting file.");
}
function exportFile()
{
if(confirm("Exporting file may take sometime. Do you want to continue?"))
{
var options =
{
type: "POST",
success: exportSuccess, // post-submit callback
error: exportError,
url: 'exportURI',
dataType: 'text'
};
// bind to the form's submit event
$('#frmExport').submit(function()
{
$(this).ajaxSubmit(options);
showMask("exportFile");
//always return false
return false;
});
}
}`
1 answers
solution1
0 2013-08-10 20:29:24
I'm pretty sure your problem is that you hook the submit event ( $('#frmExport').submit(...) ) when the submit has already been triggered. Try hooking it on the document.ready.
$(document).ready(function() {
var options =
{
type: "POST",
success: exportSuccess, // post-submit callback
error: exportError,
url: 'exportURI',
dataType: 'text'
};
// bind to the form's submit event
$('#frmExport').submit(function()
{
$(this).ajaxSubmit(options);
showMask("exportFile");
//always return false
return false;
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.