I am using the Form plugin to do an ajaxSubmit on a form that contains
a
file upload. The form submits fine on a regular HTML page, but when I
use
the form on a dialog (http://docs.jquery.com/UI/Dialog), the form
churns and
never submits. Relevant code below
Form
<div id="addDocument" class="hideElement">
<form id="incidentDocumentForm" method="POST"
enctype="multipart/form-data"><input
type="hidden" name="MAX_FILE_SIZE" value="100000" />
<div class="formlbl">Description:</div>
<div class="formCol"><input type="text" name="fileDescription"
id="fileDescription" size="30" /></div>
<div class="newline"> </div>
<div class="formlbl">File:</div>
<div class="formCol"><input type="file" name="file" id="file"
size="60" /></div>
<div class="newline_para"> </div>
<div class="formlbl"><input type="submit" value="Submit" id="sd" /></
div>
</form></div>
javascript that fires the dialog
function addDocument() {
$("#addDocument").dialog("close");
$("#addDocument").removeClass("hideElement").dialog( {draggable:
true,
bgiframe: false,
resizable: false,
title:'Add A Supporting Document', width: 500, height: 280});
}
Submit ( ajaxSubmit() ) Code
$('form#incidentDocumentForm').submit(function(){
var oldhtml = $('#addDocument').html();
var errorSendingMsg = 'Your document could not be saved.
Please
try again';
var loadingImgSrc =
'${pageContext.request.contextPath}/styles/images/indicator.gif';
var options = {
//url:
'ajax.do?serviceName=saveLegalComment&serviceType=xml',
url: 'ajax.do',
type: 'POST',
dataType: 'html',
iframe: true,
target: '#addDocument',
timeout: 1,
beforeSubmit: function(formData, jqForm, options) {
$('#addDocument').html("<div
class=\"newline_para\"> </div> "+loadingImgSrc+" ");
return true;
},
error: function(){
$('#addDocument').html(oldhtml);
alert(errorSendingMsg);
},
success: function(response){
$("#addDocument").dialog("close");
//location.reload();
}
};
$(this).ajaxSubmit(options);
return false;
});
Thoughts?
