防止 JSF Dialog AJAX CRUD 上的雙重提交

Question

只是想知道為什么我會在我的應用程序中遇到這種行為。

我在 UI 中使用了primefaces，幾乎我所有的頁面都遵循這種模式。 我在所有 CRUD 操作中大量使用 AJAX，並使用對話框將其顯示給用戶。

<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 和其他瀏覽器

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

顯然這會導致雙重提交。 以前，我在較舊的應用程序中在此場景中使用了 Post-Redirect-Get，但由於這是 AJAX JSF 更新，因此我無法執行此操作。

對此有什么解決方法，這是否正常？ 我認為在瀏覽器刷新期間不應再次觸發 AJAX 操作。

幫助？

更新

我正在用這個代碼打開我的對話框

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

我的創建對話框使用這個

<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

Answer 1

已經經歷過幾次回調方法中的 JavaScript 錯誤最終會導致這種行為。 我能夠重現您的問題，該問題在更正回調簽名后消失了：

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

根據您的 JavaScript 函數簽名：

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

（如果您的 JavaScript 調用只有 3 個參數，那么請更正oncomplete調用）

無關：我猜您正在使用此功能來關閉特定對話框。 另一種方法是將widgetVar屬性分配給您的對話框：

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

widgetVar對象將在回調函數中表示您的對話框，因此您可以通過調用對話框的hide()函數關閉它：

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