数据表中的 Primefaces confirmDialog 问题答案

【问题标题】：Primefaces confirmDialog issue in dataTable数据表中的 Primefaces confirmDialog 问题
【发布时间】：2014-11-24 11:29:03
【问题描述】：

在将 JSF 与 Primefaces 一起使用时，我遇到了一个问题。我在dataTable中使用了confirmDialog。经过这么多次（至少 3 次）我点击了 commandButton，confirmDialog 不能正常工作并且动作很慢。我该如何解决或任何其他建议？

这是我的 JSF 页面的形式。

<h:form id="salePersonTableForm">
    <h:commandLink action="#{ManageSalePersonActionBean.createNewSalePerson}">
        <h:panelGrid columns="2">
            <h:graphicImage value="/images/add.png" styleClass="command-image" />
            <h:outputText value="#{label['COMMON_ADDNEW_LINK']}" styleClass="command-link" />
        </h:panelGrid>
    </h:commandLink>
    <p:outputPanel id="listPanel">
        <table>
            <tr>
                <td>
                    <p:selectOneMenu converter="omnifaces.SelectItemsIndexConverter" id="selectSalePersonCriteria" value="#{ManageSalePersonActionBean.selectedCriteria}"
                        style="width:150px;font-size:13px;">
                        <f:selectItem itemLabel="Select Criteria" />
                        <f:selectItems value="#{ManageSalePersonActionBean.criteriaItems}" var="criteriaItem" />
                    </p:selectOneMenu>
                </td>
                <td>
                    <p:inputText id="customerCriteria" style="width:150px;" value="#{ManageSalePersonActionBean.criteria.criteriaValue}" />
                </td>
                <td>
                    <p:commandButton action="#{ManageSalePersonActionBean.searchSalePerson}" id="searchSalePersonButtonBtn" update=":salePersonTableForm" value="Search" style="font-size:13px;" />
                </td>
                <td>
                    <p:commandButton action="#{ManageSalePersonActionBean.init()}" id="resetSalePersonButtonBtn" update=":salePersonTableForm" value="Reset" style="font-size:13px;" />
                </td>
            </tr>
        </table>
        <p:dataTable var="salePerson" value="#{ManageSalePersonActionBean.salePersonList}" id="salePersonTable" paginator="true" rows="10" style="width:100%;"
            paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" rowsPerPageTemplate="5,10, 15"
            rowIndexVar="index">
            <p:column headerText="No" style="width:50px;font-size:13px;">
                <h:outputText value="#{index + 1}" style="font-size:13px;" />
            </p:column>
            <p:column headerText="SalePersonID" style="font-size:13px;">
                <h:outputText value="#{salePerson.salePersonCode}" style="font-size:13px;" />
            </p:column>
            <p:column headerText="Name" style="font-size:13px;">
                <h:outputText value="#{salePerson.salePersonName}" style="font-size:13px;" />
            </p:column>
            <p:column headerText="AccountStatus" style="font-size:13px;">
                <h:outputText value="#{salePerson.accountDisable == true ? 'lock' : 'unlock'}" style="font-size:13px;" />
            </p:column>
            <!-- Lock/Unlock -->
            <p:column style="width:70px;">
                <p:commandButton action="#{ManageSalePersonActionBean.changeLockStatus(salePerson)}" value="#{salePerson.accountDisable == false ? 'lock' : 'unlock'}"
                    update="salePersonTable" style="font-size:13px;">
                    <p:confirm header="Confirmation" message="Are you sure?" icon="ui-icon-alert" />
                </p:commandButton>
            </p:column>
            <!-- ########## -->
            <p:column style="width:30px;">
                <p:commandLink action="#{ManageSalePersonActionBean.prepareUpdateSalePerson(salePerson)}" update=":salePersonEntryForm">
                    <p:graphicImage value="/images/edit.png" styleClass="command-image" />
                </p:commandLink>
            </p:column>
            <p:column style="width:30px;">
                <p:commandLink id="deletesalePersonLink" actionListener="#{ManageSalePersonActionBean.deleteSalePerson(salePerson)}" update=":salePersonTableForm">
                    <p:graphicImage value="/images/delete.png" styleClass="command-image" />
                    <p:confirm header="Confirmation" message="Are you sure?" icon="ui-icon-alert" />
                </p:commandLink>
            </p:column>
        </p:dataTable>
        <p:confirmDialog global="true" showEffect="fade" hideEffect="explode">
            <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
            <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
        </p:confirmDialog>
    </p:outputPanel>
</h:form>

这里是在 ManagedBean 中处理的。

public void changeLockStatus(SalePerson salePerson) {
    try {
        salePerson.setAccountDisable(!salePerson.isAccountDisable());
        salePersonService.updateSalePerson(salePerson);
    } catch (SystemException e) {
        handelSysException(e);
    }
}

【问题讨论】：

标签： java jsf primefaces

【解决方案1】：

我遇到了类似的问题。在我的例子中，使用像你这样的结构，每次通过 ajax 更新表单时，都会在 html 页面中添加一个额外的对话框 <div id="j_idt63" class="ui-confirm-dialog...。

如果我将<p:confirmDialog> 放在<h:form> 之外，那么我只有一个对话框实例并且它可以正常工作。

【讨论】：