Question

我有jQuery UI确认对话框：

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

由JSF2 html调用：

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

但我无法从此函数中获得true / false值。我在这个网站上看到了很多关于它的问题，尝试了所有这些问题，但仍然没有成功。

更新：输出<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">

Answer 1

这是我使用的一种方法（你可以根据你的例子采用一般的想法）

您需要两个按钮

首先一个将被隐藏，并且会在确认对话框中单击Yes进行调用，此隐藏按钮将是将调用服务器端方法的按钮使用render

执行f:ajax

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

第二个按钮将打开对话框，此按钮也会将表单提交给服务器execute="@form"（如果您在表中有选择列（选择表中的多个列并单击）要删除的按钮，例如你想在服务器bean中更新）

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

现在执行js函数

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

请注意，只有在单击“确定”对话框按钮后，才会执行隐藏按钮$("#myHiddenButtonID").click();，否则不会发生任何事情......

从过去How to implement JQuery confirm dialog with JSF

中回答的类似问题中得出了这个问题

Answer 2

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 3

发生这种情况是因为函数执行并调用对话框插件并完成，而后者又被执行，并且Bottons上的返回不会影响事件。

克服它的最好方法是创建一个根据按下的按钮执行的回调函数：

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

然后你可以这样称呼它：

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

Answer 4

返回是在嵌套函数中的ok和cancel按钮的上下文中，你可以尝试回调：

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

然后打电话

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

Answer 5

我不太了解JS，但我的猜测是return false在嵌套函数中返回？！你想要做的就是这个;

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

就像我说的，我不是Javascript的专家，但这就是我认为的问题：）

jQuery UI确认对话框不返回true / false

5 个答案: