PrimeFaces commandButton Anzeigeformular auf der gleichen Seite

Question

Ich bin ein Anfänger in JSF. Ich entwickle eine Anwendung für die Verwaltung von Einrichtungen. Die Indexseite enthält die Liste der Eigenschaften mit drei Schaltflächen zum Einfügen, Aktualisieren und Löschen einer Eigenschaft. Nachdem ich auf den Button "neue Eigenschaft hinzufügen" geklickt habe, zeige ich einen Dialog mit Feldern zum Füllen und eine Schaltfläche an sparen. Sobald ich Felder ausfülle und auf "Speichern" klicke, wird die Liste der Eigenschaften automatisch aktualisiert. All das auf derselben Seite. Ich habe viele Lösungen ausprobiert, aber es funktioniert nicht. Ich habe auch die Antworten versucht, die in anderen Fragen vorgeschlagen werden, aber es funktioniert nicht auf meiner Seite. Ich habe meinen Code kopiert und es in einer anderen Seite einfügen und es funktioniert, ich weiß nicht, wo das Problem

Dies ist mein Code

<section class="content"> 
    <h:form id="a" enctype="multipart/form-data"> 

    <h:panelGrid columns="1" cellpadding="5"> 
    <p:commandButton value="Add property" type="button" icon="ui-icon-adds" onclick="PF('dlg1').show();" />  
    <br/> 
    </h:panelGrid> 

    <p:dataTable var="property" value="#{propertybean.propertyList}" id="AjoutTab" rows="10" 
        paginator="true" 
        paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" 
        rowsPerPageTemplate="5,10,15" 
        widgetVar="propsTable" 
       emptyMessage="No property found with given criteria" > 
    <f:facet name="header"> 
     <p:outputPanel> 
      <h:outputText value="Search all fields:" /> 
      <p:inputText id="globalFilter" onkeyup="propsTable.filter()" style="width:150px" placeholder="Enter keyword"/> 
     </p:outputPanel> 
    </f:facet> 

    <p:ajax event="sort" skipChildren="false" /> 
     <p:column headerText="Name" sortBy="#{property.propName}" filterMatchMode="contains"> 
      <h:outputText value="#{property.propName}"></h:outputText> 
     </p:column> 

     <p:column headerText="Valid From" sortBy="#{property.propValidfromDate}" filterMatchMode="contains"> 
      <h:outputText value="#{property.propValidfromDate}"></h:outputText> 
     </p:column> 

     <p:column headerText="Valid To" filterMatchMode="contains"> 
      <h:outputText value="#{property.propValidtoDate}"></h:outputText> 
     </p:column> 

    <p:column headerText="Country" filterMatchMode="contains"> 
      <h:outputText value="#{property.propCountry}"></h:outputText> 
     </p:column> 
    <p:column headerText="Street name" filterMatchMode="contains"> 
      <h:outputText value="#{property.propStreetname}"></h:outputText> 
     </p:column> 

     <p:column headerText="Street number" filterMatchMode="contains"> 
      <h:outputText value="#{property.propStreetnb}"></h:outputText> 
     </p:column> 
    <p:column headerText="Zip code" filterMatchMode="contains"> 
      <h:outputText value="#{property.propPostcode}"></h:outputText> 
     </p:column> 
    <p:column headerText="Length" filterMatchMode="contains"> 
      <h:outputText value="#{property.propLength}"></h:outputText> 
     </p:column> 
    <p:column headerText="Width" filterMatchMode="contains"> 
      <h:outputText value="#{property.propWidth}"></h:outputText> 
     </p:column> 
     <p:column headerText="Status" filterMatchMode="contains"> 
      <h:outputText value="#{property.propStatus}"></h:outputText> 
     </p:column> 
     <p:column headerText="Area" filterMatchMode="contains"> 
      <h:outputText value="#{property.propArea}"></h:outputText> 
     </p:column> 
     <p:column headerText="Comment" filterMatchMode="contains"> 
      <h:outputText value="#{property.propComment}"></h:outputText> 
     </p:column> 

    </p:dataTable> 

<p:dialog header="New property" widgetVar="dlg1" minHeight="40"> 

      <p:growl id="growl" showDetail="true" sticky="false" life="10000"/> 
      <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;"> 

       <f:facet name="header"> 
        <h:outputLabel value="Fill in fields"/> 
       </f:facet> 

       <h:outputLabel for="Id" title="Id" value="Id:" style="color: crimson;" /> 
        <h:inputText value="#{propertybean.propId}" id="Id" required="true"/> 
       <h:outputLabel for="Name" value="Name property:" style="color: crimson;"/> 
       <h:inputText id="Name" value="#{propertybean.propName}" required="true"/> 
       <h:outputLabel for="propValidfromDate" value="Valid from:" style="color: crimson;"/> 
       <p:calendar id="propValidfromDate" value="#{propertybean.propValidfromDate}" required="true"/> 
       <h:outputLabel for="propValidtoDate" value="Valid to:" style="color: crimson;"/> 
       <p:calendar id="propValidtoDate" value="#{propertybean.propValidtoDate}" required="true"/> 
       <h:outputLabel for="country" value="Country:" style="color: crimson;"/> 
       <h:inputText id="country" value="#{propertybean.propCountry}" required="true"/> 
       <h:outputLabel for="propStreetname" value="Street name:" style="color: crimson;"/> 
       <h:inputText id="propStreetname" value="#{propertybean.propStreetname}" required="true"/> 
       <h:outputLabel for="propStreetnb" value="Street number:" style="color: crimson;"/> 
       <h:inputText id="propStreetnb" value="#{propertybean.propStreetnb}" required="true"/> 
       <h:outputLabel for="propPostcode" value="Zip code:" style="color: crimson;"/> 
       <h:inputText id="propPostcode" value="#{propertybean.propPostcode}" required="true"/> 
       <h:outputLabel for="propLength" value="Length:" style="color: crimson;"/> 
       <h:inputText id="propLength" value="#{propertybean.propLength}" required="true"/> 
       <h:outputLabel for="propWidth" value="Width:" style="color: crimson;"/> 
       <h:inputText id="propWidth" value="#{propertybean.propWidth}" required="true"/> 
       <h:outputLabel for="propStatus" value="Status:" style="color: crimson;"/> 
       <h:inputText id="propStatus" value="#{propertybean.propStatus}" required="true"/> 
       <h:outputLabel for="propArea" value="Area:" style="color: crimson;"/> 
       <h:inputText id="propArea" value="#{propertybean.propArea}" required="true"/> 
       <h:outputLabel for="propComment" value="Comments:" style="color: crimson;"/> 
       <h:inputText id="propComment" value="#{propertybean.propComment}" required="true"/> 


      </h:panelGrid> 
      <p:separator/> 
      <p:commandButton value="Save" action="#{propertybean.addProperty()}" /> 



</p:dialog>  

</h:form> 

Ich wäre dankbar, wenn jemand helfen könnte

Answer 1

Haben die Frage nicht richtig verstanden, aber seien sie das folgende könnte es

1. Sowohl die Formen bearbeiten lösen wird und AjoutP ist auf der gleichen Seite.
2. Stellen Sie sicher, dass keine verschachtelten Formulare vorhanden sind.
3. Sicherstellen, dass kein Element mit id und widgetVar gleich ist.
4. halten schließlich das Bearbeitungsformular innerhalb Dialog

<p:dialog header="Ajout de Prop" widgetVar="propertyAjout"> 
    <h:form id="edit"> 
    </h:form> 
</p:dialog> 

Answer 2

Grundsätzlich ist der Grund, warum ich sehe, ist die p: Formular-Tag: Dialog nicht innerhalb einer Stunde eingeschlossen werden müssen.

<h:form id="AjoutP"> 
    <p:commandButton value="Add property" icon="ui-icon-adds" actionListener="#{propertybean.ajoutEvent(actionEvent)}" update=":edit:editP" oncomplete="propertyAjout.show()"/> 
</h:form> 
<p:dialog header="Ajout de Prop" widgetVar="propertyAjout" resizable="false" id="editP" modal="true"> 
... 
</p:dialog> 

Und wenn Sie primeface 5 oder höher Ihre onComplete verwenden müssen, das eigentliche Problem oncomplete="PF('propertyAjout').show()"