CODEWITHSUNDEEP
javaajaxjsf-2primefaces
Mark Estrada
Mark Estrada

Reputation: 9191

Prevent Double Submit on JSF Dialog AJAX CRUD

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

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>

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...

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.

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

Help?

UPDATE

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>

I actually am following the pages from this site...Full WebApplication JSF EJB JPA JAAS

Upvotes: 1

Views: 1189

Answers (1)

Akos K
Akos K

Reputation: 7133

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')"

accordingly to you JavaScript function signature:

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

(Sure if your JavaScript call has only 3 parameters then correct the oncomplete call)

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>

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();  
    }  
}

Upvotes: 2

Related Questions