2013-01-17 8 views
5

Ich versuche primefaces <p:dialog> kombiniert mit <p:commandButton> zu verwenden. In meiner .xhtml Seite habe ich eine Auswahlliste und einen Befehlsschaltfläche, die verwendet wird, um einen Dialog anzuzeigen. Der Dialog zeigt eine Datentabelle mit Zielwerten aus der Auswahlliste an. Dialog hat zwei Schaltflächen: Abbrechen und Senden. Mein Problem ist, dass der Senden-Button nicht ausgelöst wird. Was komisch ist, funktioniert commandButton out of dialog.Primefaces dialog + commandButton

Hier ist meine .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> 

Ich habe Schaltfläche arbeiten und nicht einen Arbeitstag. Was muss ich tun, damit es funktioniert?

+0

Haben Sie sich die Konsole angesehen, die keinen Ajax-Anruf macht? oder funktioniert es einfach nicht? Versuchen Sie in Firebug zu suchen, wenn es Daten an den Server sendet, oder ist das AJAX-Feuern und die Methode '# {editSkills.showSkillsAndLevels}' wird überhaupt nicht aufgerufen? Überprüfen Sie auch, ob Firebug keine JS-Fehler anzeigt. – Mindwin

+0

@Mindwin scheint es, dass es überhaupt nicht aufgerufen wird. Es werden auch keine JS-Fehler angezeigt. – AjMeen

Antwort

17

Sie können eine der folgenden versuchen, ich wählen Sie die Nummer eins, es ist ein sauberes Design IMO

  1. Bringen Sie die <p:dialog/> außerhalb der allgemeinen <h:form/> und legt ein <h:form/>innen es statt

    <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. Fügen Sie appendToBody="false" zu <p:dialog/> hinzu, um sicherzustellen, dass der Dialog innerhalb der HTML-Form in den DOM-Einträgen gerendert wird Text von Auto-Umzug an Ende des HTML-Körpers. Dies kann jedoch in verschiedenen Browsern zu inkonsistentem Rendering führen.

+0

Danke für Ihre Antwort! Ich habe getan, was Sie mir gesagt haben, aber jetzt bekomme ich diesen Fehler: '/user/editSkills.xhtml @ 39,121 itemValue =" # {skill.id} ": Die Klasse 'java.lang.String' hat nicht die Eigenschaft "id". Was ist seltsam, ich denke, es ist mit Picklist verbunden und es ist komisch, denn Picklist funktioniert gut. Was soll ich machen? – AjMeen

+0

@AjMeen, das ist ein ganz anderes Problem, wahrscheinlich verursacht durch die Tatsache, dass '# {skill.id}' und '# {skillslevel.level}' 'nicht den gleichen Datentyp haben (einer davon ist ein String, der andere ist etwas) sonst). Aber jetzt wird dein commandButton definitiv ausgelöst. – kolossus

+0

'# {skillslevel.level}' hat nichts mit diesem Fehler zu tun, denn selbst wenn ich 'skilsslevel' Teil entferne, wird der Fehler immer noch angezeigt. Ich brauche wahrscheinlich einen Konverter. Trotzdem danke für Hilfe! – AjMeen

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

Stellen Sie sicher, ' zu verwenden, wenn u den Namen widgetVar nennen. Sie können auch sofort = "true" oder process = "@ this" verwenden.

+0

sollten Sie nicht sofort = "wahr" oder Prozess = "@ this" benötigen. Ihre Antwort hatte jedoch die schnelle Information, die ich brauchte. Vielen Dank! – Eric