Primefaces,正确使用表单标签的方式

时间:2014-03-23 08:04:59

标签: jsf primefaces

我有一个xhtml,其中我在一个表单中包装两个模型对话框(我包裹整个主体)。因此,当我尝试在一个对话框中提交内容时,我从另一个对话框中获得验证错误。

当我为每个对话框分隔表单时,我收到警告,我应该将整个内容包装在一个表单下(或者我已经解释过了)。

在此示例和一般情况下,使用表单标记的正确方法是什么?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

<f:view>

    <h:head>
        <meta http-equiv="X-UA-Compatible" content="IE=9"/>
        <meta http-equiv="Content-Type" content="text/html;charset=utf8"/>
    </h:head>


    <h:body id="templateBody">
        <h:form id="userForm" prependId="false">

            <p:messages id="mymessages" autoUpdate="true" showDetail="true"/>

            <h:panelGrid columns="4" id="operationBtnsGrid">

                <p:commandButton value="New" icon="ui-icon-plusthick" onclick="newDialog.show();"/>

                <p:commandButton value="Update" update="dataTable" icon="ui-icon-pencil"
                                 disabled="#{userController.userModels.selectedUser.id==null}"
                                 onclick="updateDialog.show();"/>

                <p:commandButton id="Delete" value="Delete" update="dataTable" onclick="confirmation.show()"
                                 icon="ui-icon-trash" disabled="#{userController.userModels.selectedUser.id==null}"/>

            </h:panelGrid>

            <p:dataTable id="dataTable"
                         var="user"
                         value="#{userController.findAll()}"
                         rowKey="#{user.id}"
                         selectionMode="single"
                         selection="#{userController.userModels.selectedUser}">


                <f:facet name="header">
                    <h:outputText value="User List"/>
                </f:facet>

                <p:ajax event="rowSelect" update="@(form)"/>

                <p:column>
                    <f:facet name="header">
                        <h:outputText value="Name"/>
                    </f:facet>
                    <h:outputText value="#{user.name}"/>
                </p:column>

                <p:column>
                    <f:facet name="header">
                        <h:outputText value="Lastname"/>
                    </f:facet>
                    <h:outputText value="#{user.lastname}"/>
                </p:column>

                <p:column>
                    <f:facet name="header">
                        <h:outputText value="Phone Number"/>
                    </f:facet>
                    <h:outputText value="#{user.phoneNumber}"/>
                </p:column>

            </p:dataTable>

            <p:dialog header="Add New User" widgetVar="newDialog" modal="true">

                <p:panelGrid columns="2">

                    <h:outputLabel for="new_name" value="Name: "/>
                    <p:inputText id="new_name" required="true" value="#{userController.userModels.newUser.name}"/>

                    <h:outputLabel for="new_lastname" value="Lastname: "/>
                    <p:inputText id="new_lastname" required="true" value="#{userController.userModels.newUser.lastname}"/>

                    <h:outputLabel for="new_phoneNumber" value="Phone number: "/>
                    <p:inputMask id="new_phoneNumber" value="#{userController.userModels.newUser.phoneNumber}" mask="(999) 999-9999"/>

                </p:panelGrid>

                <p:panelGrid columns="1">

                    <p:captcha label="Captcha" language="en" theme="white"/>

                </p:panelGrid>

                <p:commandButton id="saveNewButton" actionListener="#{userController.addNewUser}"
                                 oncomplete="confirmation.hide()" update="@(form), @(#mymessages)" value="Save"
                                 ajax = "false" icon="ui-icon-check"/>

            </p:dialog>

            <p:dialog header="Update User" widgetVar="updateDialog" modal="true">

                <p:panelGrid columns="2">

                    <h:outputLabel for="update_name" value="Name: "/>
                    <p:inputText id="update_name" required="true" value="#{userController.userModels.selectedUser.name}"/>

                    <h:outputLabel for="update_lastname" value="Lastname: "/>
                    <p:inputText id="update_lastname" required="true" value="#{userController.userModels.selectedUser.lastname}"/>

                    <h:outputLabel for="update_phoneNumber" value="Phone number: "/>
                    <p:inputMask id="update_phoneNumber" value="#{userController.userModels.selectedUser.phoneNumber}" mask="(999) 999-9999"/>

                </p:panelGrid>

                <p:commandButton id="updateSelectedButton" actionListener="#{userController.updateUser}"
                                 oncomplete="confirmation.hide()" update="@(form), @(#mymessages)" value="Save"
                                 ajax = "false" icon="ui-icon-check"/>

            </p:dialog>

            <p:confirmDialog id="confirmDialog" message="Silmek istediğinizden emin misiniz ?"
                             header="Silmek için onayınız gerekiyor" severity="alert" widgetVar="confirmation">

                <p:commandButton id="confirm" value="Evet" oncomplete="confirmation.hide()"
                                 actionListener="#{userController.deleteUser}"
                                 ajax = "false" update="@(form), @(#mymessages)"/>
                <p:commandButton id="decline" value="Hayır" onclick="confirmation.hide()" type="button"/>

            </p:confirmDialog>

        </h:form>

        <p:ajaxStatus style="width:64px;height:64px;position:fixed;right:5px;bottom:5px">
            <f:facet name="start">
                <p:graphicImage value="/images/ajax-loader.gif" />
            </f:facet>

            <f:facet name="complete">
                <h:outputText value="" />
            </f:facet>
        </p:ajaxStatus>

    </h:body>
</f:view>
</html>

1 个答案:

答案 0 :(得分:0)

当您进行表单提交时,它会提交整个表单和所有ID,您将它们全部放在页面上,以便验证失败。

你可以: A)使用&#39;呈现&#39;在您的div块上根据条件将它们隐藏在dom中,但不太可能是因为您想要更新/新 - 这种困难。

B)使用PPR(部分树处理) http://www.primefaces.org/showcase/ui/pprPartialTree.jsf

在您的命令按钮上 - 添加&#39; process =&#34; update_name,update_lastname,update_phoneNumber&#34;&#39; 这只会提交要更新的字段,或者如果你将它们包装在一个带有id的块中,你可以只进行处理=&#34; blockToUpdate&#34;