PrimeFaces commandButton display form in the same page

Question

I'm a beginner in JSF. I am developing an application for managing facilities. The index page contains the list of properties with three buttons for inserting, updating and deleting a property.What I want to do is, once I click on the button "add new property", display a dialog with fields to fill and a button to save. Once I fill in fields and click on "save", the list of properties is automatically refreshed. All that on the same page. I've tried many solutions but it's not working. I've also tried the answers suggested in other questions but it's not working on my page. I've copied my code and paste it in an other page and it's working, i don't know where is the problem

This is my 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>

I'd be grateful if anyone could help

"can't display" is an enduser experience... What does technically happen? How is it 'the same page'? If you create an [mcve], it might be easier to help. — Kukeltje, Apr 19 '16 at 16:07
Once I click on "add property" nothing happens, no errors generated, it's like when you click on a button that you didn't define the "action" The same page means the same page where I have the "add" button without redirection to an other page(that i have to create). It's like a popup that appears on the page once you click on a button — Salma Zouhdi, Apr 19 '16 at 16:17
So yoyu mean something like this: http://stackoverflow.com/questions/2118656/commandlink-commandbutton-ajax-backing-bean-action-listener-method-not-invoked — Kukeltje, Apr 19 '16 at 17:33

techipank · Answer 1 · 2016-04-20T06:20:15.600

1

Didn't understood the question properly but do the following might be it will resolve

Both the forms edit and AjoutP is in same page.
Make sure there is no nested forms.
Make sure there is no element with id and widgetVar same.
finally keep the edit form inside dialog

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

edited Apr 20 '16 at 06:20

answered Apr 20 '16 at 05:49

techipank

432
4
17

I did what you've said but still not working – Salma Zouhdi Apr 20 '16 at 09:17
Have you seen the link which @BalusC is given and which version of Primefaces you are using and Eva Mariam is also gave solution for that try those option, – techipank Apr 20 '16 at 09:24

score 0 · Answer 2 · answered Apr 20 '16 at 06:39

Basically the reason i see is the p:dialog must not be enclosed within a h:form tag.

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

And if you use primeface 5 or above your oncomplete must be oncomplete="PF('propertyAjout').show()"

PrimeFaces commandButton display form in the same page

2 Answers2