JavaEE+Primefaces问题：删除按钮的ConfirmDialog无法弹出

看起来你遇到的问题是：动态渲染的数据表格行中，删除按钮的确认对话框第一次点击完全不生效，直接执行了删除操作；但点击过编辑按钮（触发全局页面更新）后，删除按钮的确认对话框又能正常弹出。这本质是动态生成的组件（dataTable行内的按钮）的客户端确认事件，没有在页面首次加载时完成正确绑定——编辑按钮的update="@all"重新渲染了整个页面，补全了事件绑定，所以后续删除按钮能正常工作。

下面给你几个可行的修复方案，按推荐程度排序：

方案1：手动绑定确认对话框（最稳定） #

放弃依赖<p:confirm>的自动绑定逻辑，改为手动触发确认对话框，并在确认后执行删除操作，彻底避免动态组件的事件绑定问题：

修改XHTML代码 #

<ui:define name="content">
    <h1>ProbeType overview</h1>
    <p>Use this site to view available probetypes and if necessary to edit them.</p>
    
    <h:form id="probelist">
        <p:dataTable value="#{probeBean.probeTypes}" var="probetype">
            <p:column style="width: 40px">
                <p:commandButton icon="ui-icon-pencil" id="btnEdit" 
                                 action="#{editProbeBean.editProbeType(probetype)}" 
                                 update="@all" />
            </p:column>
            <p:column style="width: 40px">
                <!-- 改为普通按钮，点击仅触发确认对话框 -->
                <p:commandButton icon="ui-icon-cancel" id="btnDel" 
                                 type="button"
                                 onclick="PF('deleteConfirmDialog').show();"
                                 styleClass="delete-btn"
                                 data-probe-id="#{probetype.id}" />
            </p:column>
        </p:dataTable>
        <!-- 隐藏字段：传递要删除的ProbeType ID -->
        <h:inputHidden id="selectedProbeId" value="#{probeBean.selectedProbeId}" />
    </h:form>

    <!-- 自定义确认对话框，不依赖全局模式 -->
    <p:confirmDialog widgetVar="deleteConfirmDialog" 
                     header="Confirm" 
                     message="Would you like to delete this probetype with all corresponding data?" 
                     icon="ui-icon-alert">
        <h:form>
            <p:commandButton value="Yes" 
                             action="#{probeBean.deleteSelectedProbeType()}" 
                             update="@all"
                             oncomplete="PF('deleteConfirmDialog').hide();" />
            <p:commandButton value="No" 
                             type="button" 
                             onclick="PF('deleteConfirmDialog').hide();" />
        </h:form>
    </p:confirmDialog>

    <script type="text/javascript">
        // 点击删除按钮时，把当前行的ProbeType ID存入隐藏字段
        $(document).on('click', '.delete-btn', function() {
            const probeId = $(this).data('probe-id');
            $('#probelist\\:selectedProbeId').val(probeId);
        });
    </script>
</ui:define>

修改ProbeBean代码 #

添加存储选中ID的字段，以及通过ID删除的方法：

public class ProbeBean implements Serializable {
    private static final long serialVersionUID = 1L;
    private List<ProbeType> probetypes;
    @Inject private ProbeTypeFacadeLocal probeTypeFacade;
    // 新增：存储选中要删除的ProbeType ID
    private Long selectedProbeId;

    // 省略原有getProbeTypes()等方法...

    public Long getSelectedProbeId() {
        return selectedProbeId;
    }

    public void setSelectedProbeId(Long selectedProbeId) {
        this.selectedProbeId = selectedProbeId;
    }

    // 新增：通过ID删除的方法
    public String deleteSelectedProbeType() {
        try {
            ProbeType probe = probeTypeFacade.getProbeTypeById(selectedProbeId);
            probeTypeFacade.deleteProbeType(probe);
            probetypes = probeTypeFacade.getAllProbeTypes();
        } catch (Exception e) {
            FacesContext.getCurrentInstance().addMessage("errors", 
                new FacesMessage(FacesMessage.SEVERITY_ERROR, "Error!", 
                "Error while deleting, are there still Jobs in database?"));
        }
        return "probelist.xhtml";
    }

    // 保留原有deleteProbeType方法（可选，根据需求调整）
    public String deleteProbeType(ProbeType probe) {
        // ...原有代码...
    }
}

方案2：修复动态组件的事件绑定 #

如果你想继续使用<p:confirm>标签，可以通过JavaScript在dataTable渲染完成后，重新绑定确认事件：

修改XHTML代码 #

<ui:define name="content">
    <h1>ProbeType overview</h1>
    <p>Use this site to view available probetypes and if necessary to edit them.</p>
    
    <h:form id="probelist">
        <p:dataTable value="#{probeBean.probeTypes}" var="probetype" widgetVar="probeTable">
            <p:column style="width: 40px">
                <p:commandButton icon="ui-icon-pencil" id="btnEdit" 
                                 action="#{editProbeBean.editProbeType(probetype)}" 
                                 update="@all" />
            </p:column>
            <p:column style="width: 40px">
                <p:commandButton icon="ui-icon-cancel" id="btnDel" 
                                 action="#{probeBean.deleteProbeType(probetype)}" 
                                 update="@all">
                    <p:confirm header="Confirm" message="Would you like to delete this probetype with all corresponding data?" icon="ui-icon-alert"/>
                </p:commandButton>
            </p:column>
        </p:dataTable>
    </h:form>

    <p:confirmDialog global="true" widgetVar="globalConfirmDialog" showEffect="fade" hideEffect="fade">
        <p:commandButton value="Yes" type="button" id="btnYes" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
        <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
    </p:confirmDialog>

    <script type="text/javascript">
        // 页面加载完成后，监听dataTable渲染事件，重新绑定确认逻辑
        $(document).ready(function() {
            // 首次加载时绑定一次
            reattachConfirmEvents();
            // dataTable更新后重新绑定
            PF('probeTable').bind('rowRender', reattachConfirmEvents);
        });

        function reattachConfirmEvents() {
            $('.ui-confirm-dialog-trigger').off('click').on('click', function(e) {
                e.preventDefault();
                PrimeFaces.confirmDialogSource = this;
                PF('globalConfirmDialog').show();
            });
        }
    </script>
</ui:define>

方案3：调整更新范围（快速临时修复） #

把删除按钮的update="@all"改为update="probelist"，避免重新渲染整个页面导致的初始化异常：

<p:commandButton icon="ui-icon-cancel" id="btnDel" 
                 action="#{probeBean.deleteProbeType(probetype)}" 
                 update="probelist">
    <p:confirm header="Confirm" message="Would you like to delete this probetype with all corresponding data?" icon="ui-icon-alert"/>
</p:commandButton>

这个方案最简单，但可能无法覆盖所有场景下的绑定问题，适合快速测试验证。

内容的提问来源于stack exchange，提问作者Obstschale