jQuery UI confirm dialog not returns true/false

Question

I have jQuery UI confirm dialog:

function fnComfirm(title, content) {
    $("#dialog:ui-dialog").dialog("destroy");
    $("#dialog-confirm p").html(content);
    $("#dialog-confirm").dialog({
        title: title,
        resizable: false,
        height: 200,
        width: 486,
        modal: true,
        buttons: {
            "OK": function() {
                $( this ).dialog("close");
                return true;
            },
            Cancel: function() {
                $( this ).dialog("close");
                return false;
            }
        }
    });
}

Called by JSF2 html:

<a4j:commandButton action="#{userBean.makeSomething()}"  type="button" onclick="if (fnValidateUsersList()) {return fnComfirm('Delete User', 'Bla bla')}" />

But I can't get true/false value from this function. I saw many questions here on this site about it, tried all of them, but still get no success.

UPDATE: output of <a4j:commandButton>:

<input type="button" value="Make Something" onclick="jsf.util.chain(this,event,&quot;if (fnValidateUsersList()) {return fnComfirm('Delete User', 'Bla bla')}&quot;,&quot;RichFaces.ajax(\&quot;frm:j_idt25\&quot;,event,{\&quot;incId\&quot;:\&quot;1\&quot;} )&quot;);return false;" name="frm:j_idt25" id="frm:j_idt25">

score 2 · Accepted Answer · edited May 23 '17 at 11:43

Here an approach that I use (You can take the general idea for your example)

You need two buttons

First one will be hidden and will be called as a result of clicking Yes in the confirm dialog, this hidden button will be the one that will call the server side method and will do the render using the f:ajax

<h:commandButton id="myHiddenButtonID" value="DeleteHiddenButton" action="#{userBean.makeSomething()}" style="display:none">
    <f:ajax render="@form" ></f:ajax>
</h:commandButton>

Second button will open the dialog, this button will also submit the form to the server with execute="@form" (in case you have selection column in table (select several columns in table and click button to delete) that you want to to update in the server bean for example)

<h:commandButton value="Delete">
    <f:ajax execute="@form" onevent="openDialogFunc()"></f:ajax>
</h:commandButton>

now to the implementation of the js function

function openDialogFunc(data){
    if (data.status === 'success') {
        $('#dialog').dialog({
                    title: title,
                    resizable: false,
                    height: 200,
                     width: 486,
                     modal: true,
         buttons: {
                 "Ok": function() { 
                     $("#myHiddenButtonID").click();
                     $(this).dialog("close"); 
                 }, 
                 "Cancel": function() { 
                     $(this).dialog("close"); 
                 } 
             }
         });
    }
}

Notice that only upon clicking the OK dialog button there will be an execution of your hidden button $("#myHiddenButtonID").click(); otherwise nothing will happen...

took this from similar question that I have answered in the past How to implement JQuery confirm dialog with JSF

score 0 · Answer 2 · answered Jul 10 '12 at 15:27

function fnComfirm(title, content) {
    $("#dialog:ui-dialog").dialog("destroy");
    $("#dialog-confirm p").html(content);
    $("#dialog-confirm").dialog({
        title: title,
        resizable: false,
        height: 200,
        width: 486,
        modal: true,
        buttons: {
            "OK": function() {
                //do whatever you need here, i.e. form post
                alert('ok!');
            },
            Cancel: function() {
                $( this ).dialog("close");
                return false;
            }
        }
    });
}

Sorry, I need to call some Java function and it must be in the JSF code, not here. — udar_molota, Jul 10 '12 at 15:34

score 0 · Answer 3 · answered Jul 10 '12 at 15:27

0

This happens because the function executes and call the dialog plugin and finishes, which in turn is executed and the return on the bottons don't affect the event.

The best way to overcome it is to create a calback function that is executed depending on the pressed button:

function fnComfirm(title, content, callbackOK, callbackCancel) {  
    $("#dialog:ui-dialog").dialog("destroy");  
    $("#dialog-confirm p").html(content);  
    $("#dialog-confirm").dialog({  
        title: title,  
        resizable: false,  
        height: 200,  
        width: 486,  
        modal: true,  
        buttons: {  
            "OK": function() {  
                $( this ).dialog("close"); 
                if (typeof callbackOK == function) {
                    callbackOK();
                } else if (callbackOK) {
                    window.location.href = callbackOK;
                }
                return true;  
            },  
            Cancel: function() {  
                $( this ).dialog("close");
                if (typeof callbackCancel == function) {
                    callbackCancel();
                } else if (callbackCancel) {
                    window.location.href = callbackCancel;
                }

                return false;  
            }  
        }  
    });
    return false;
}

Then you can call it this way:

... onclick="if (fnValidateUsersList()) {return fnComfirm('Delete User', 'Bla bla', this.href)}"

answered Jul 10 '12 at 15:27

Ricardo Souza

16,030
6
37
69

@udar_molota The plus in this case is that you can use a function or an URL as your callback parameter. – Ricardo Souza Jul 10 '12 at 15:36
That's confusing: you're calling function with 3 arguments and the function itself this 4 arguments. And I don't use redirection, I'm calling for some Java function. – udar_molota Jul 10 '12 at 15:37
In javascript all parameters are optional and I do a check inside the function to certificate that the value is there before doing any action with it. You have the option to use redirects or inform a function to be executed for OK or Cancel. – Ricardo Souza Jul 10 '12 at 15:38
Can I somehow just return boolean from this function? I need it in the button. – udar_molota Jul 10 '12 at 15:41
The separated context in which the dialog is executed doesn't allow this. What is the output HTML from the jsf2 control? A button with an onclick event on it? What happens with the action attribute on the output? – Ricardo Souza Jul 10 '12 at 15:48
Yes, button with onclick. Maybe I can somehow cancel default action and in case of "OK" return it back? What is the meaning of this 'confirm dialog' if it not acts as browser built in dialog? – udar_molota Jul 10 '12 at 15:53
Please add the outputed HTML from the control above to your answer, so I can take a look and propose a better aprouch. This is a custom made dialog and is not meant to replace the browser default implementation of `confirm()`. You will have to tweek just a bit your implementation to archieve a similar result. PS: I use this implementation on a buch of intranet systems and it works fine. – Ricardo Souza Jul 10 '12 at 16:02

score 0 · Answer 4 · edited Jan 08 '14 at 12:21

0

The returns is in the context of ok and cancel buttons in a nested function you can try call backs:

function fnComfirm(title, content,onSusses,onCancel) {
    $("#dialog:ui-dialog").dialog("destroy");
    $("#dialog-confirm p").html(content);
    $("#dialog-confirm").dialog({
        title: title,
        resizable: false,
        height: 200,
        width: 486,
        modal: true,
        buttons: {
            "OK": function() {
                $( this ).dialog("close");
                onSusses();
            },
            Cancel: function() {
                $( this ).dialog("close");
                onCancel();
            }
        }
    });
}

and call then

fnComfirm(title,content,function(){alert('Ok')},function(){alert('cancel');}})

edited Jan 08 '14 at 12:21

BenMorel

34,448
50
182
322

answered Jul 10 '12 at 15:29

Rolando Corratge Nieves

1,233
2
10
25

Don't forget to check if the callbacks are valid functions. If not, this would cause an error if one of them are ommited. – Ricardo Souza Jul 10 '12 at 15:35
Still no luck. I think the reason is that javascript is asynchronous and default action of the button not waiting for answer from function. – udar_molota Jul 10 '12 at 15:47

score -2 · Answer 5 · answered Jul 10 '12 at 15:23

-2

I don't know JS too well, but my guess is that the return false is returning within the nested function?! What you would want to do is this;

function fnComfirm(title, content) {
var returnVar;
$("#dialog:ui-dialog").dialog("destroy");
$("#dialog-confirm p").html(content);
$("#dialog-confirm").dialog({
    title: title,
    resizable: false,
    height: 200,
    width: 486,
    modal: true,
    buttons: {
        "OK": function() {
            $( this ).dialog("close");
            returnVar = true;
        },
        Cancel: function() {
            $( this ).dialog("close");
            returnVar = false;
        }
    }
});
return returnVar;
}

Like I said, I'm not an expert in Javascript, but this is what I think is the problem :)

answered Jul 10 '12 at 15:23

Tom O

1,780
2
20
43

No ... in the context of the OK and Cancel functions, return true/false tells jQuery/javascript to not bubble up events. – jrummell Jul 10 '12 at 15:25
Okay, like I said I'm not an expert on Javascript (Or JQuery for that matter) this was just my prospective on it. – Tom O Jul 10 '12 at 15:26
I tried this but its not working... Its always returning false. – Tapan kumar Dec 23 '13 at 14:03

jQuery UI confirm dialog not returns true/false

5 Answers5

Linked