PrimeFaces commandButton在同一页面中显示表单

时间:2016-04-19 15:29:56

标签: hibernate jsf primefaces commandbutton

我是JSF的初学者。我正在开发一个管理设施的应用程序。索引页面包含具有三个用于插入,更新和删除属性的按钮的属性列表。我想要做的是,一旦我点击按钮"添加新属性",显示一个包含字段的对话框填充和保存按钮。填写字段并单击" save"后,将自动刷新属性列表。所有这些都在同一页面上。我尝试了很多解决方案,但它没有工作。我也尝试过在其他问题中提出的答案,但它在我的页面上没有工作。我复制了我的代码并将其粘贴到其他页面中并且它正在工作,我不知道问题出在哪里

这是我的代码

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

如果有人能提供帮助,我将不胜感激

2 个答案:

答案 0 :(得分:1)

没有正确理解这个问题,但是可能会解决以下问题

  1. 表单编辑 AjoutP 都在同一页面中。
  2. 确保没有嵌套表单。
  3. 确保没有与idwidgetVar相同的元素。
  4. 最后将编辑表单保留在对话框
  5. <p:dialog header="Ajout de Prop" widgetVar="propertyAjout">
         <h:form id="edit">
         </h:form>
    </p:dialog>
    

答案 1 :(得分:0)

基本上我看到的原因是p:对话框不能包含在h:form标签中。

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

如果您使用primeface 5或以上,则oncomplete必须为oncomplete="PF('propertyAjout').show()"