Impossible d'utiliser javascript pour envoyer() formulaire de couture

Question

Salut J'ai un formulaire de couture que nous utilisons pour télécharger une pièce jointe à notre code java. Tout fonctionnait bien jusqu'à ce que nous devions afficher une boîte de dialogue jquery pour donner à l'utilisateur un retour visuel sur le téléchargement.

Pour ce faire, nous intercepter l'événement onsubmit via javascript, mettre en place la boîte de dialogue jquery puis une seconde plus tard soumettre le formulaire via document.forms[...].submit().

Tout a l'air de fonctionner, le message apparaît, une seconde plus tard, nous voyons que le navigateur transfère des données sur le serveur, mais la couture n'invoque pas l'action du formulaire. La page se rafraîchit simplement et rien ne se passe.

Si je supprime le javascript submit() et que le formulaire est soumis dans le bouton de soumission normal, cliquez sur seam traite normalement l'action sur le serveur.

Ma forme de couture:

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

Ma fonction javascript qui gère la forme événement 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 
} 

D'autres recherches montrent que le poste « normal » comprend le IDEchange annexé au referer dans la les en-têtes, mais le post lancé par javascript ne le fait pas.

têtes post Normal:

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 lancé têtes post

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 

... 

Le code HTML pour la forme que générée par la couture:

<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

Essayez ceci:

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

Lorsque j'ai rencontré des problèmes auparavant avec les formulaires Seam c'est parce que le bouton lui-même est traité par Seam. Lorsque vous cliquez sur le bouton (ou appuyez sur Entrée dans le formulaire, qui agit comme un clic sur le bouton), vous devriez voir un paramètre supplémentaire dans les données du formulaire. * Dans votre cas, cela ressemblerait à:

j_id14:j_id26:Upload 

Si vous envoyez le formulaire en JavaScript, ce paramètre n'est pas inclus dans le message. Sans cela, Seam ne sait pas sur quel bouton a été cliqué et donc quelle action invoquer.

* Ces données sont visibles dans les outils Firebug/Developer sous les en-têtes que vous avez publiés.