Primefaces commandButton在ajax表单刷新后不显示对话框答案

【问题标题】：Primefaces commandButton is not showing dialog after ajax form refreshPrimefaces commandButton在ajax表单刷新后不显示对话框
【发布时间】：2015-05-26 13:54:26
【问题描述】：

我需要您的帮助和指导来解决使用 ajax 刷新表单后显示 dialog 的问题。我有一个dataTable，它显示了许多请求，并且单击commandButton 视图，将显示一个包含一些信息的dialog。在dialog 关闭时，表单将被刷新，dataTable 将从数据库中获取更新的信息。但是第一次会显示对话框并通过关闭dialog 来刷新表单。

如果我第二次尝试再次单击视图commandButton，commandButton 将不会显示任何对话框并且似乎不会执行任何操作。即使是日志也没有显示任何内容。

这是我的 xhtml：

<h:form id="Requests">
    <p:dataTable id="PendingRequests" var="hr" value="#{hrd.pendingRequests}"
            filteredValue="#{hrd.filteredPendingRequests}">
        <p:column headerText="Req. Date" sortBy="#{hr.requestDate}"
                filterMatchMode="contains" filterBy="#{hr.requestDate}">
            <h:outputText value="#{hr.requestDate}" />
        </p:column>
        <p:column>
            <f:facet name="header">View</f:facet>
            <p:commandButton id="submitbutton" update=":Requests:#{hr.dialogueName} "
                    oncomplete="PF('#{hr.certificateDialogue}').show()" icon="ui-icon-search"
                    title="View">
                <f:setPropertyActionListener value="#{hr}" target="#{hrd.selectedRequest}" />
            </p:commandButton>
        </p:column>
    </p:dataTable>
    <p:dialog id="CertificateDialog" header="Cert1" widgetVar="CertificateDialog">
        <p:ajax event="close" update=":Requests" listener="#{hrd.UpdateDatatable}" />
    </p:dialog>
</h:form>

该方法会在dialog的关闭时调用。UpdateDatatable方法代码为：

listPendingRequests.clear();
listPendingRequests = new ArrayList<PendingRequests>();
PreparedStatement ps = null;
String sql = "";

try {
    con = DBConn.getInstance().getConnection("jdbc/hr");

    // SQL Statement
    ps = con.prepareStatement(sql);
    ResultSet result = ps.executeQuery();
    while (result.next()) {
        PendingRequests pendingList = new PendingRequests();

        requestDate = result.getString("REQ_DT");

        pendingList.setRequestDate(requestDate);

        listPendingRequests.add(pendingList);

        RequestContext.getCurrentInstance().update("Requests");
    }
} catch (Exception e) {
    System.err.print(e);
    e.printStackTrace();
}

【问题讨论】：

标签： ajax jsf primefaces

【解决方案1】：

对话框在 HTML DOM 和 JavaScript 中有特殊处理。您永远不应该在仍然处于同一视图中时对任何对话框的父级进行 ajax 更新。否则，您可能会在 JS 中出现重复的对话框和冲突。此外，strong recommendation 是为每个对话框提供其自己的形式，如<p:dialog><h:form> 以避免初学者混淆和误用，但由于您想在其上使用 ajax 关闭事件，you can't get around 改为使用 <h:form><p:dialog> .但是，您以完全相同的形式放置了其他内容，甚至还对其进行了 ajax 更新。这是不对的。

将表单与对话框本身联系起来，不要在上面放其他东西。也就是说，拆分当前表单。

<h:form id="requests">
    <p:dataTable ...>
        ...
    </p:dataTable>
</h:form>
<h:form>
    <p:dialog ...>
        <p:ajax event="close" ... update=":requests" />
    </p:dialog>
</h:form>

【讨论】：