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(con         


        

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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 :)