数据表中的Primefaces ConfirmDialog问题

Question

I have an issue when using JSF with Primefaces. I used confirmDialog in dataTable. After so many times (at least 3 times) i clicked commandButton, the confirmDialog does not work properly and actioning is slowly. How can i solve or any other advice?

Here is form of my JSF Page.

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

Here is procedured in ManagedBean.

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

Answer 1

I had a similar problem. In my case, with the structure like yours, everytime the form was updated by ajax, an additional dialog <div id="j_idt63" class="ui-confirm-dialog... was added to the html page.

If I put the <p:confirmDialog> outside of the <h:form> than I have only one instance of the dialog and it works proper.