prevent双提交关于JSF的对话框AJAX CRUD [英] Prevent Double Submit on JSF Dialog AJAX CRUD

问题描述

只是想知道为什么我遇到我的应用程序这种行为。

Just would like to know why do I encounter this behavior in my application.

我用primefaces的用户界面和几乎所有我的网页遵循这种模式。我大量使用AJAX在我所有的CRUD 操作和使用对话框展示给用户。

I used primefaces for the UI and almost all of my pages follows this pattern. I heavily used AJAX in all of my CRUD operations and using dialogs to show it to the user.

<ui:composition template="myTemplate.xhtml">
    <ui:define name="content">
        <ui:include
            src="/pages/CreateDialog.xhtml" />
        <ui:include
            src="/pages/UpdateDialog.xhtml" />
        <ui:include
            src="/pages/DeleteDialog.xhtml" />
    </ui:define>
</ui:composition>

我唯一担心的是，这样做CRUD的东西在我的对话和用户后，不小心点击F5或刷新浏览器， FF / Chrome和其他浏览器总是提到

My only concern is that, after doing CRUD stuff in my dialogs and user accidentally clicks F5 or refresh on the browser, FF/Chrome and other browser always mentioned

To display this page, Firefox must send repeat action...

显然，这将导致双提交。 previously我用后重定向，获得在这种情况下中老年的应用程序，但由于这 在AJAX JSF更新话，我无法做到这一点。

Obviously this will cause double submit. Previously I used Post-Redirect-Get in this scenario in older apps but since this is AJAX JSF update then I cannot do this.

有什么解决办法，这和这正常吗？我认为AJAX的行动不应在刷新浏览器再次触发。

What's the workaround for this and is this normal? I thought AJAX actions should not trigger again during browser refresh.

帮助？

更新

我这个code打开我的对话框

I am opening my dialog with this code

<p:commandButton value="Add" 
        onclick="createWidget.show();"
        update=":CreateForm"
        action="#{MyBean.add}" 
        />

我创建对话框使用此

My create dialog uses this

<p:dialog  header="Create">
    <h:form id="CreateForm" prependId="false">
        <p:commandButton value="Add" icon="ui-icon-plus"
            actionListener="#{MyBean.add}"
            update=":messageGrowl" 
            oncomplete="closeDialogIfSucess(xhr, status, args, createWidget 'createDialogId')"/>
    </h:form>
</p:dialog>

其实，我是跟着从这个网站上的网页... 完整的WebApplication JSF EJB JPA JAAS

推荐答案

已经经历了几次了具有回调方法的JavaScript错误这样的行为结束。我能够重现你的问题是校正后回调签名消失了：

Already experienced a few times that having JavaScript errors in callback methods ends up in such behavior. I was able to reproduce your problem which is disappeared after correcting the callback signature:

oncomplete="closeDialogIfSucess(xhr, status, args, createWidget, 'createDialogId')"

因此​​你的JavaScript函数签名：

accordingly to you JavaScript function signature:

function closeDialogIfSucess(xhr, status, args, createWidget, dialogid)

（当然，如果你的JavaScript调用只有3个参数，然后更正的onComplete 通话）

无关：我猜你正在使用此功能来关闭特定的对话框。另一种方法做这件事会被分配 widgetVar 属性到您的对话框：

Unrelated: I guess that you are using this function to close a specific dialog. Another way doing it would be assigning widgetVar attribute to your dialog:

<p:dialog id="testDialog"  header="Create" widgetVar="createWidget">
    <h:form id="CreateForm" prependId="false">
        ...
    </h:form>
</p:dialog>

在 widgetVar 对象将重新present在回调函数的对话框，您可以通过电话关闭了隐藏（）的对话功能：

The widgetVar object will represent your dialog in the callback function so you can close it by call the hide() function of dialog:

function closeDialogIfSucess(xhr, status, args, createWidget) {
    if(args.validationFailed || !args.loggedIn) {  
        jQuery('#testDialog').effect("shake", { times:3 }, 100);  
    } else {  
        createWidget.hide();  
    }  
}

这篇关于prevent双提交关于JSF的对话框AJAX CRUD的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！