jQuery UI 确认对话框不返回真/假

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

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

更新： <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

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

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

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

返回是在嵌套函数中的确定和取消按钮的上下文中，您可以尝试回调：

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 方面的专家，但这就是我认为的问题 :)