嗨,我有一个接缝表单,用于将附件上传到我们的Java代码。一切运行良好,直到我们需要显示一个jquery对话框来向用户提供上传正在进行的视觉反馈。
为此,我们通过javascript拦截onsubmit事件,打开jquery对话框,然后再通过document.forms[...].submit()
提交表单。
一切看起来都正常,出现消息,再过一秒钟,我们看到浏览器正在将数据传输到服务器,但是seam不会调用表单的动作。该页面只是刷新而没有任何反应。
如果我删除了javascript Submit()并在正常的Submit按钮中让表单被提交,则seam将正常处理服务器上的操作。
我的接缝形式:
<h:form onsubmit="return ClickSuperUtil.submitForm();" enctype="multipart/form-data">
<s:validateAll>
<h:panelGrid columns="2">
<h:outputText rendered="false" value="#{messages['document_type']}:" />
<h:selectOneMenu rendered="false" value="#{document.documentType}" required="true">
<f:selectItem itemLabel="#{messages['dt_rollover']}" itemValue="ROLLOVER" />
<f:selectItem itemLabel="#{messages['dt_sg_contribution']}" itemValue="SG_CONTRIBUTION" />
</h:selectOneMenu>
<h:outputText value="#{messages['document_format']}:" />
<h:selectOneMenu value="#{document.documentFormat}" required="true">
<s:selectItems value="#{uploadHistoryManager.contributionFormatList}" var="contributionFormat" label="#{contributionFormat}" noSelectionLabel="Please Select..."/>
</h:selectOneMenu>
<h:outputText value="#{messages['upload_document']}:" />
<s:fileUpload data="#{document.uploadedDocument}"
fileName="#{document.documentName}" fileSize="#{document.documentSize}"
/>
</h:panelGrid>
</s:validateAll>
<h:commandButton styleClass="menubutton" value="#{messages['upload']}" action="#{uploader.upload}">
<f:param name="fileUploaded" value="fileUploaded" />
<s:conversationId/>
</h:commandButton>
</h:form>
我的javascript函数,用于处理表单onsubmit事件:
ClickSuperUtil.submitForm=function()
{
if(this.messageDisplayed == null)
{
this.showPleaseWaitDialog();
this.messageDisplayed = true
setTimeout("document.getElementById('uploadPanel').getElementsByTagName('form')[0].submit()",1000)
return false
}
this.messageDisplayed = null
return true
}
进一步的研究表明,“正常”的帖子在标题中包含附加到引用者的sessionId,而javascript启动的帖子则没有。
普通帖子标题:
POST /connectweb/upload.seam HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2.6)
Gecko/20100625 Firefox/3.6.6 GTB7.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Referer: http://localhost:8080/connectweb/upload.seam?conversationId=73
Cookie: JSESSIONID=309AA62DD4929392DD9561389F5A36BA
...
JavaScript启动的帖子标题
POST /connectweb/upload.seam HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2.6)
Gecko/20100625 Firefox/3.6.6 GTB7.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Referer: http://localhost:8080/connectweb/upload.seam
Cookie: JSESSIONID=309AA62DD4929392DD9561389F5A36BA
...
由seam生成的表单的html:
<form onsubmit="return ClickSuperUtil.submitForm();" enctype="multipart/form-data" action="/connectweb/upload.seam" method="post" name="j_id14" id="j_id14">
<input type="hidden" value="j_id14" name="j_id14">
<table>
<tbody>
<tr>
<td>Document Format:</td>
<td><select size="1" name="j_id14:j_id22">
<option value="org.jboss.seam.ui.NoSelectionConverter.noSelectionValue">Please Select...</option>
<option value="CUSCAL">CUSCAL</option>
<option value="ORACLE">ORACLE</option>
<option selected="selected" value="ROCKFAST">ROCKFAST</option>
</select></td>
</tr>
<tr>
<td>Upload Document:</td>
<td><input type="file" name="j_id14:j_id25" id="j_id14:j_id25"></td>
</tr>
</tbody>
</table>
<input type="submit" class="menubutton" value="Upload" name="j_id14:j_id26"><input type="hidden" autocomplete="off" value="H4sIAAAAAA ... /B7CYBAA==" id="javax.faces.ViewState" name="javax.faces.ViewState">
</form>
最佳答案
尝试这个:
$(document).ready(function(){
$('#uploadForm').submit(function() {
//Show some throbber and ensure ClickSuperUtil.submitForm() returns true
return ClickSuperUtil.submitForm();
});
});
<h:form id="uploadForm" preprendId="false" enctype="multipart/form-data">