如果用户浏览离开页面，检查页面是否有修改

Question

我有一个 primefaces 网络应用程序，它由几个选项卡组成，用户可以在其中输入和编辑一些数据。如果用户编辑数据并想保存它，他按下保存按钮，数据将持久保存到数据库中。如果他想恢复他的输入，他只需按下重置按钮。

每个选项卡都是自己包含的 .xhtml 页面。

现在我们要检查，如果用户使用菜单导航离开或按下重置按钮，是否进行了一些更改，并询问他是否真的想在不保存的情况下浏览离开。

你有什么建议吗？

标签页如下：

    <p:tabView id="tabView" 
        activeIndex="#{management.activeTabIndex}"
        rendered="#{management.dataFetched}"
        styleClass="tab-view">

        <p:ajax event="tabChange" update=":tabForm" />

        <p:tab id="firstTab" title="First">
            <p:panel id="firstPanel" styleClass="info-panel">
                <ui:include src="/home/test/infoHost.xhtml" />
            </p:panel>
        </p:tab>

        <p:tab id="secondTab" title="Second">
            <p:panel id="secondPanel" styleClass="info-panel">
                <ui:include src="/home/test/infoDb.xhtml" />
            </p:panel>
        </p:tab>

        <p:tab id="thirdTab" title="Third">
            <p:panel id="thirdPanel" styleClass="info-panel">
                <ui:include src="/home/test/infoSt.xhtml" />
            </p:panel>
        </p:tab>
            </p:panel>
        </p:tab>
    </p:tabView>
</h:form>

非常感谢！

Answer 1

我会在单击选项卡时编写 jQuery 函数并将其绑定到选项卡。在这个函数中，我将获取数据的内容，创建 <p:remoteCommand> 调用支持 bean 函数。作为参数，我将从 jQuery 函数传递数据，并在支持 bean 中将其与存储数据的字段值进行比较。如果这些不同，请从支持 bean "Are you sure...".

调用对话框

http://www.primefaces.org/showcase/ui/overlay/confirmDialog.xhtml

http://www.primefaces.org/showcase/ui/ajax/remoteCommand.xhtml

如果用户浏览离开页面，检查页面是否有修改

Check page for modifications if the user browses away from page

jsf

tabs

primefaces

jsf-2