The form that is turned into a dialog is a separate form at the end of
the main form. Relevant code below. It seems the combination of
dialog + File element + Form plugin (ajaxSubmit() or ajaxForm() ) is a
no-go. The ajaxSubmit() works fine when there is no FILE element OR
the form is moved out of the dialog. Haven't been able to exactly
diagnose where the issue is, but I keep getting timed out on ajaxSubmit
() when it has a FILE element in a dialog.
<div class="content">
<form name="partBForm" id="partBForm" method="post" action="/
qualityconnect/submitPartB.do">
<input type="hidden" name="incidentId" value="15656" id="incidentId">
<div class="formCol"><textarea name="investigationDesc" cols="90"
rows="6" id="investigationDesc">de</textarea></div>
<div class="formlbl"><a href="javascript:void(0);"
onclick="addDocument();" class="link"><b>Add a Supporting
Document</b></a></div>
</form>
</div>
<div id="addDocument" class="hideElement">
<form id="incidentDocumentForm" enctype="multipart/form-data"
action="incidentDocument.do"><input type="hidden"
name="incidentId" value="15656" /><input
type="hidden" name="MAX_FILE_SIZE" value="100000" /> <input
<div class="formlbl"><font color="white"><b>File:</b></font></div>
<div class="formCol"><input type="file" name="file1" id="file1"
size="50" /></div>
<div class="formlbl"><input type="submit" value="Submit" id="sd" /></
div>
</form>
</div>
</div>
</body>
</html>
On Jan 15, 5:43 am, "Richard D. Worth" <rdwo...@gmail.com> wrote:
> Your issue may be related to the fact the when you call .dialog(), it moves
> the element it wraps (the dialog content) to the end of the body (no other
> way to get it to be on top in IE). This trips up some people because they'll
> turn a part of a form (say a fieldset or a div inside a form) into a dialog
> and elements will actually be ripped out of the form, breaking the form. I
> noticed that's not what you're doing below, since you've got a div around
> your form and you're turning that into a dialog, but that's my best guess.
>
> Anyway, I hope that helps you isolate the problem. If you're able to post a
> full page online, I'd be happy to look at it. Also note, there's a dedicated
> jQuery UI mailing list:
>
> http://groups.google.com/group/jquery-ui
>
> - Richard
>
> On Wed, Jan 14, 2009 at 3:59 PM, cmulist <guru.manda...@gmail.com> wrote:
>
> > 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?
