primefaces command button not showing a confirm dialog until after the second click

Question

So I'm pretty new to jsf, I want a confirm dialog to be shown only if an attribute is set to true in my backing bean. I have something like this.

I have a data table which is multi selectable. When you select items in the table, an attribute get sets in the backing bean to hold those items.

Basically what the "showDeleteDialog()" method does, is check to see if any of those items in the list is selected, only then will it show the confirm dialog if the delete button is selected.

So what I want to happen is once a person has selected items from the data table, click the delete button. Have a confirm dialog come up and then delete the selected items. If the user has no items selected from the data table. I want the delete button to not show the confirm dialog.

            <p:commandButton
                styleClass="referralTaskDeleteBtn"
                id="deleteButton"
                value="#{loc['RegionAdmin.TaskType.DeleteButton']}"
                icon="ui-icon-close"
                update="deleteConfirmDialog,@this"
                rendered="true"
                action="#{referralTasksController.showDeleteDialog()}"
                oncomplete="if (#{referralTasksController.displayDeleteDialog}) { PF('confirmDailogWidget').show(); }"
                style="visibility: #{referralTasksController.toggleDeleteAndCompleteButtons()};"
                disabled="#{not referralTasksController.enableEditButtons()}"
        >
        </p:commandButton>

and the backing bean method

    public void showDeleteDialog(){
    if (selectedReferralTasks.size()!=0)
        this.displayDeleteDialog = true;

}

Anytime I click this, my dialog box only opens after the second click. Any ideas why? I'll include the dialog in case that is needed. Any help would be appreciate.

<p:outputPanel id="confirmationDailogOutputPanel">
            <p:confirmDialog
                    id="deleteConfirmDialog"
                    header="Confirm Delete"
                    message="Are you sure you want to delete the selected Tasks"
                    showEffect="fade" hideEffect="fade"
                        widgetVar="confirmDailogWidget"
                    >

                <p:commandButton value="#{loc['RegionAdmin.TaskType.DeleteButton']}" styleClass="confirmDialogDeleteButton" icon="ui-icon-check"
                                 action="#{referralTasksController.deleteTasks()}"
                                 oncomplete="PF('confirmDailogWidget').hide();"
                                 update=":#{p:component('NoticePanel')},referralsTaskList,completeButton,deleteButton"
                />
                <p:commandButton value="#{loc['RegionAdmin.TaskType.CancelButton']}"
                                 styleClass="confirmDialogCancelButton"
                                 icon="ui-icon-close"
                                 oncomplete="PF('confirmDailogWidget').hide();"/>
            </p:confirmDialog>
        </p:outputPanel>

to be honest i didn't understand your question the only idea that i have is to try to make an output in your condition and see if he entrer the first time — Yagami Light, Aug 05 '16 at 20:42

score 0 · Answer 1 · edited May 23 '17 at 12:00

Problem explanation

In this oncomplete="if (#{referralTasksController.displayDeleteDialog}) { PF('confirmDailogWidget').show(); }" part of code you mixed ExpressionLanguage (#{referralTasksController.displayDeleteDialog}) and JavaScript code (everything else).

So when you load page Expression Language is evaluated (you can put a breakpoint to check this). At the first time when page is loaded of course evaluation return false. The code looks like this oncomplete="if (false) { PF('confirmDailogWidget').show(); }". It will never call show() method.

When page is reloaded (after button click) Expression Language is once again evaluated. Now code looks like this oncomplete="if (true) { PF('confirmDailogWidget').show(); }" (if you select data in datatable of course). This is a reason why dialog shows on second attempt.

Solutions

First: Runtime update

Remove oncomplete="if (#{referralTasksController.displayDeleteDialog}) { PF('confirmDailogWidget').show(); }"

Change bean method to

public void showDeleteDialog(){
    if (selectedReferralTasks.size()!=0){
          RequestContext.getCurrentInstance().execute("confirmDailogWidget.show()");
    }
}

}

More about this solution you can found in PF documentation Misc > Request Context or in Open from bean by RequestContext#execute()

Second: Use p:confirmDialog rendered parameter

Remove oncomplete="if (#{referralTasksController.displayDeleteDialog}) { PF('confirmDailogWidget').show(); }"
Add rendered parameter to p:confirmDialog like this <p:confirmDialog rendered="#{referralTasksController.displayDeleteDialog}". Take a look at PF documentation and list of p:confirmDialog attributes
Change update parameter after button click to update confirmationDailogOutputPanel like this <p:commandButton update="confirmationDailogOutputPanel". Connected with Ajax update/render does not work on a component which has rendered attribute

primefaces command button not showing a confirm dialog until after the second click

1 Answers1

Problem explanation

Solutions