Kann Javascript nicht verwenden, um() Naht Formular zu senden

Question

Hallo Ich habe eine Naht Form, die wir verwenden, um einen Anhang zu unserem Java-Code hochladen. Alles funktionierte, bis wir einen Jquery-Dialog anzeigen mussten, um dem Benutzer ein visuelles Feedback zu geben, dass der Upload stattgefunden hat.

Um dies zu tun, fangen wir das onsubmit-Ereignis über Javascript auf, stellen den jquery-Dialog auf und senden das Formular dann eine Sekunde später unter document.forms[...].submit().

Alles sieht so aus, als ob es funktioniert, die Nachricht erscheint, eine Sekunde später sehen wir, dass der Browser Daten auf den Server überträgt, aber Naht ruft die Aktion des Formulars nicht auf. Die Seite wird einfach aktualisiert und nichts passiert.

Wenn ich das Javascript submit() lösche und das Formular in der normalen Übermittlungsschaltfläche gesendet bekomme, funktioniert die Aktion auf dem Server normal.

Meine Nahtform:

<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>  

Meine Javascript-Funktion, die das Formular onsubmit Ereignis behandelt:

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 
} 

Weitere Untersuchungen zeigen, dass die "normalen" Post die ConversationId in der an den Referer beigefügten enthält Kopfzeilen, aber der Javascript initiiert Beitrag nicht.

Normale Post-Header:

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 initiiert Post Header

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 

... 

Der HTML-Code für die Form, wie durch Naht erzeugt:

<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> 

Answer 1

Try this:

$(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"> 

Answer 2

Wenn ich aufgetretenen Probleme, bevor sie mit Nahtformen ist es, weil die Schaltfläche selbst durch Seam verarbeitet wird. Wenn Sie auf die Schaltfläche klicken (oder die Eingabetaste in das Formular drücken, das wie ein Klick auf die Schaltfläche wirkt), sollten Sie in den geposteten Formulardaten für die Schaltfläche einen zusätzlichen Parameter sehen. * In Ihrem Fall würde es so aussehen:

j_id14:j_id26:Upload 

Wenn Sie das Formular mit JavaScript senden, ist dieser Parameter nicht im Formular enthalten. Ohne es weiß Seam nicht, welche Taste geklickt wurde und welche Aktion somit aufgerufen werden sollte.

* Diese Daten sind in den Firebug/Developer-Tools unterhalb der von Ihnen geposteten Header sichtbar.