带有确认对话框的 JSF inputSwitch答案

【问题标题】：JSF inputSwitch with confirmDialog带有确认对话框的 JSF inputSwitch
【发布时间】：2021-03-17 11:41:10
【问题描述】：

我有一个 inputSwitch 需要显示一个对话框来确认或不进行操作。如果我将其打开或关闭，该对话框应显示一条可变消息。我做了下一件事，但问题是当我按下否并且我切换开关以使其进入原始状态时，它再次调用 ajax 事件并再次打开对话框。如何仅在单击而不是在调用 .toggle 函数时启动事件？

                <p:outputLabel for="activa"
                    value="#{bundleBean.getValue('activa')}" />
                <p:inputSwitch id="activa"
                    value="#{gestionBean.domainEntity.activa}" onLabel="Si"
                    offLabel="No"
                    widgetVar="switch#{gestionBean.domainEntity.id}">
                    <p:ajax event="change" update="test" oncomplete="PF('dialog#{gestionBean.domainEntity.id}').show()"></p:ajax>
                </p:inputSwitch>

                <div>
                    <p:confirmDialog id="test" 
                        widgetVar="dialog#{gestionBean.domainEntity.id}"
                        styleClass="content-confirmation-dialog"
                        message="#{gestionBean.mensajeDialogoActiva(gestionBean.domainEntity.activa)}"
                        header="#{bundleBean.getValue('confirmacion')}" closable="false">

                        <p:commandButton value="Si"
                            styleClass="boton rounded-button ui-button-danger float-right ui-confirmdialog-yes" immediate="true"
                            onclick="PF('dialog#{gestionBean.domainEntity.id}').hide()" />
                        <!-- action="#{gestionBean.cambiarEstado(gestionBean.domainEntity)}"  -->
                        <p:commandButton value="No" styleClass="boton rounded-button ui-button ui-confirmdialog-no"
                            immediate="true"
                            update="activa"
                            onclick="PF('switch#{gestionBean.domainEntity.id}').toggle(); PF('dialog#{gestionBean.domainEntity.id}').hide()" />
                    </p:confirmDialog>

【问题讨论】：

标签： jsf primefaces

【解决方案1】：

当您单击否按钮时，您可以更新表单，而不是开关，不会显示对话框。

<p:commandButton update="@from">

【讨论】：

【解决方案2】：

解决此问题的另一种方法是取消p:confirmDialog，而是让p:inputSwitch/p:toggleSwitch 上的更改事件触发隐藏命令按钮上的单击事件。例如：

            <p:inputSwitch id="toggle" value="#{toggleSwitchController.toggleOn}" >
                <p:ajax oncomplete="PF('hidnBtn').getJQ().click();"/>
            </p:inputSwitch>
            <p:commandButton id="hiddenBtn" widgetVar="hidnBtn" 
                             action="#{toggleSwitchController.toggleChanged}"
                             style="visibility: hidden;">
                <p:ajax event="dialogReturn" update=":frm1:growl toggle"
                        listener="#{toggleSwitchController.handleReturn}" />
            </p:commandButton>

隐藏的p:commandButton 调用的操作可以测试切换的值，如果设置为 true/yes，则使用 PrimeFace 的对话框框架显示确认对话框。对话框可以返回一个布尔值，可以在handleReturn函数中测试。

    public void toggleChanged() {
        if (toggleOn) {
            Map<String, Object> options = new HashMap<>();
            options.put("resizable", false);
            options.put("draggable", false);
            options.put("closable", false);
            options.put("modal", true);
            PrimeFaces.current().dialog().openDynamic("/pages/pleaseConfirm", options, null);
        }
    }

    public void handleReturn(SelectEvent<Boolean> event) {
        boolean confirmed = event.getObject();
        if (confirmed) {
            facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "confirmed", null));
        } else {
            facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "not confirmed", null));
            toggleOn = false;
        }
    }

您可以通过 openDynamic() 调用为文本字符串提供参数，从而使“pleaseConfirm”对话框更易于重用。

【讨论】：

我不知道为什么，但是当我更改开关时，ajax 没有调用点击。你知道为什么吗？
我在 Function.$.blockUI (blockUI.js. xhtml?ln=js&v=1_0:32) 在 bloquear (general.js.xhtml?ln=js&v=1_0:200) 在 showLoadingFeedback (general.js.xhtml?ln=js&v=1_0:189)
您使用的是哪个版本的 PrimeFaces？我用 PF v8 测试了代码。
您的 JS 错误显示“BlockUI”，所以我会在那里查看。在上面的示例中，我没有看到任何 BlockUI。

【解决方案3】：

可以通过在ajax更改事件中添加监听器，使监听器返回toggle的当前值并在显示对话框之前在onComplete子句中测试返回值来解决问题。

            <p:inputSwitch id="activa"
                           value="#{toggleSwitchController.toggleOn}" 
                           onLabel="Si" offLabel="No"
                           widgetVar="toggleWidget" >
                <p:ajax event="change" 
                        listener="#{toggleSwitchController.testToggle}"
                        update="test" 
                        oncomplete="if ( args.toggleValue == 1 ) { PF('dlgWidget').show();}" />
            </p:inputSwitch>

监听器可以很简单：

    public void testToggle() {
        PrimeFaces.current().ajax().addCallbackParam("toggleValue", (toggleOn ? 1 : 0));
    }

【讨论】：