在 dialogReturn 事件上检测UnsavedChanges

Question

在我看来，我有一个禁用的p:inputText 显示一些地址信息。 p:inputText 的值由dialogReturn 监听器onAdresseDialogReturn() 设置。除了这个 inputText 我还有其他几个输入字段（p:selectOneMenu、p:inputText）。

每当我更改其他输入组件的某些值并尝试离开页面时，我都会收到来自detectUnsavedChanges JavaScript 的警告对话框。

我现在的问题是，当dialogReturn 侦听器更改 inputText 字段的值时，我也想要此警告消息 - 但这不会发生！

所以我的问题是，我怎样才能做到这一点？

这里p:inputText 和p:commandButton 使用primefaces 对话框框架：

<ui:composition>

    <ui:define name="head">
        <h:outputScript name="js/detectUnsavedChanges.js"/>
    </ui:define>

    <ui:define name="content">
        <h:form id="form">
            <p:panelGrid>
                <p:row>
                    <p:column>
                        <p:commandButton id="save" value="Save" ajax="false" action="#{bean.save}"/>
                    </p:columns>
                </p:row>
            </p:panelGrid>

            <p:panelGrid>
                <p:row>
                    <p:column>
                        <p:inputText id="adresse" disabled="true" size="50"
                                     value="#{bean.adresse}"/>
                        <p:commandButton id="adresseAuswahl" 
                                         title="Adresse bearbeiten"
                                         process="@this"
                                         actionListener="#{bean.showAdresseDialog}">
                            <p:ajax event="dialogReturn" update="adresse"
                                    listener="#{bean.onAdresseDialogReturn}"/>
                        </p:commandButton>  
                    </p:columns>
                </p:row>
            </p:panelGrid>
        </h:form>
    </ui:define>
</ui:composition>

这里是我的 bean 中的 dialogReturn 监听器：

public void onAdresseDialogReturn(SelectEvent e) {
    final Adresse adresse = (Adresse) e.getObject();
    boolean changedAdresse = Optional.ofNullable(adresse).isPresent() 
            && !getAdresse().equals(adresse);
    if (changedBauvorhabenAdresse) {
        // Adresse has been changed
        setAdresse(adresse);
    }
}

这里是 BalusC 从How to detect unsaved data in form when user leaves the page? 提到的 JavaScript 代码：

$(function() {
    // Set the unload message whenever any input element get changed.
    $(':input').on('change', function() {
        setConfirmUnload(true);
    });

    // Turn off the unload message whenever a form get submitted properly.
    $('form').on('submit', function() {
        setConfirmUnload(false);
    });
});

function setConfirmUnload(on) {
    var message = "You have unsaved data. Are you sure to leave the page?";
    window.onbeforeunload = (on) ? function() { return message; } : null;
}

我的环境：Wildfly-10.0.0.Final 上的 Primefaces 6.0

欢迎任何提示 - 谢谢！

Answer 1

尝试将oncomplete 属性添加到p:ajax 内的commandButton。 我实际上不知道您是否可以将p:ajax 组件放在p:commandButton 中，但是在 oncomplete 属性中您应该像这样调用 setConfirmUnload(true)：

                   <p:commandButton id="adresseAuswahl" 
                                     title="Adresse bearbeiten"
                                     process="@this"
                                     actionListener="#{bean.showAdresseDialog}">
                        <p:ajax event="dialogReturn" update="adresse"
                                listener="#{bean.onAdresseDialogReturn}" oncomplete="setConfirmUnload(true)"/>
                    </p:commandButton>