2013-01-17 8 views
5

Sto cercando di utilizzare le primefaces <p:dialog> in combinazione con <p:commandButton>. Nella mia pagina .xhtml ho un elenco di selezione e un comando che viene usato per mostrare una finestra di dialogo. La finestra di dialogo è visualizzabile con i valori di destinazione dalla lista di selezione. La finestra di dialogo ha due pulsanti: annulla e invia. Il mio problema è che il pulsante di invio non viene attivato. Cosa c'è di strano, commandButton di dialoghi funziona.Finestra di dialogo Primefaces + commandButton

Ecco la mia .xhtml:

<body> 
    <ui:composition template="./../resources/mainTemplate.xhtml"> 
     <ui:define name="content"> 
      <h:form> 
       <p:dialog id="dlg" header="#{messages.chooseSkillLevel}" widgetVar="dlg" modal="true" dynamic="true"> 
        <h:dataTable value="#{editSkills.skillsAndLevels}" var="skillslevel"> 
         <h:column> 
          #{skillslevel.skill.umiejetnosc} 
         </h:column> 
         <h:column> 
          <p:selectOneMenu value="#{skillslevel.level}" > 
           <f:selectItems value="#{editSkills.levels}" var="level" itemLabel="#{level.stopien}" itemValue="#{level.id}" /> 
          </p:selectOneMenu> 
         </h:column> 
        </h:dataTable> 
        <p:commandButton value="#{messages.confirm}" action="#{editSkills.showSkillsAndLevels}" oncomplete="dlg.hide();" /> THIS BUTTON IS NOT FIRED 
        <p:commandButton value="#{messages.cancel}" onclick="dlg.hide()"/> 
       </p:dialog> 
       <p:pickList value="#{editSkills.skills}" var="skill" effect="none" 
       itemValue="#{skill.id}" itemLabel="#{skill.umiejetnosc}" 
       showSourceFilter="true" showTargetFilter="true" filterMatchMode="contains" 
       addLabel="#{messages.add}" removeLabel="#{messages.remove}" removeAllLabel="#{messages.removeAll}" > 
        <f:facet name="sourceCaption">#{messages.skillsList}</f:facet> 
        <f:facet name="targetCaption">#{messages.yourSkills}</f:facet> 
        <p:ajax event="transfer" listener="#{editSkills.onTransfer}" /> 
        <p:column style="width:100%;"> 
         #{skill.umiejetnosc} 
        </p:column> 
       </p:pickList> 
       <p:commandButton value="#{messages.confirm}" action="#{editSkills.afterSubmit}" update="dlg" oncomplete="dlg.show()" /> THIS BUTTON WORKS FINE 
       <p:commandButton value="#{messages.cancel}" action="profile" immediate="true"/> 
      </h:form> 
     </ui:define> 
    </ui:composition> 
</body> 

Ho segnato il pulsante di lavoro e non funzionante. Cosa devo fare per farlo funzionare?

+0

Hai guardato la console, non sta effettuando una chiamata ajax? o semplicemente non funziona? Prova a cercare in firebug se il suo invio di dati al server, o l'attivazione di AJAX e il metodo '# {editSkills.showSkillsAndLevels}' non viene chiamato affatto? Controlla anche se Firebug non mostra errori JS. – Mindwin

+0

@Mindwin sembra che non venga chiamato affatto. Impossibile vedere anche eventuali errori JS. – AjMeen

risposta

17

È possibile provare una delle seguenti, io voto il numero uno, è un disegno pulito IMO

  1. Portare il <p:dialog/> al di fuori del generale <h:form/> e porre <h:form/>all'interno invece

    <p:dialog id="dlg" header="#{messages.chooseSkillLevel}" widgetVar="dlg" modal="true" dynamic="true"> 
         <h:form> 
          <h:dataTable value="#{editSkills.skillsAndLevels}" var="skillslevel"> 
           <h:column> 
            #{skillslevel.skill.umiejetnosc} 
           </h:column> 
           <h:column> 
            <p:selectOneMenu value="#{skillslevel.level}" > 
             <f:selectItems value="#{editSkills.levels}" var="level" itemLabel="#{level.stopien}" itemValue="#{level.id}" /> 
            </p:selectOneMenu> 
           </h:column> 
          </h:dataTable> 
          <p:commandButton value="#{messages.confirm}" action="#{editSkills.showSkillsAndLevels}" oncomplete="dlg.hide();" /> THIS BUTTON IS NOT FIRED 
          <p:commandButton value="#{messages.cancel}" onclick="dlg.hide()"/> 
          </h:form> 
         </p:dialog> 
    
  2. Aggiungi appendToBody="false" allo <p:dialog/> per garantire che la finestra di dialogo venga visualizzata all'interno del modulo html negli ins di essere trasferito automaticamente alla fine del corpo HTML. Ma questo può causare il rendering incoerente in vari browser.

+0

Grazie per la tua risposta! Ho fatto ciò che mi hai detto di fare, ma ora ricevo questo errore: '/user/editSkills.xhtml @ 39,121 itemValue =" # {skill.id} ": La classe 'java.lang.String' non ha la proprietà 'id'. Ciò che è strano penso sia collegato al picklist ed è strano, perché il picklist funziona bene. Cosa dovrei fare? – AjMeen

+0

@AjMeen, questo è un problema completamente diverso, probabilmente causato dal fatto che '# {skill.id}' e '# {skillslevel.level}' non sono lo stesso tipo di dati (uno di loro è una stringa, l'altro è qualcosa altro). Ma ora il tuo CommandButton sta sicuramente sparando. – kolossus

+0

'# {skillslevel.level}' non ha nulla a che fare con questo errore, perché anche se rimuovo la parte 'skilsslevel' l'errore si presenta ancora. Probabilmente ho solo bisogno di un convertitore. Comunque grazie per l'aiuto! – AjMeen

4
<p:commandButton value="Cancel" oncomplete="PF('yourDialogWidgedVarName').hide();" process="@this" /> 

Assicurarsi di utilizzare ' quando u chiamata il nome widgetVar. Puoi anche usare immediate = "true" o process = "@ this".

+0

non dovrebbe essere necessario immediato = "true" o process = "@ this". Tuttavia la tua risposta ha avuto il rapido bit di informazioni di cui avevo bisogno. Grazie! – Eric