3

我有 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">
4

5 回答 5

2

这是我使用的一种方法（您可以将一般想法用于您的示例）

你需要两个按钮

第一个将被隐藏并在单击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();否则不会发生任何事情......

从我过去回答过的类似问题中得到这个如何用 JSF 实现 JQuery 确认对话框

于 2012-07-10T17:30:13.923 回答
0 
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;
            }
        }
    });
}
于 2012-07-10T15:27:36.317 回答
0

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

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

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)}"
于 2012-07-10T15:27:49.573 回答
0

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

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');}})
于 2012-07-10T15:29:44.410 回答
-2

我不太了解 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 专家，但这就是我认为的问题:)

于 2012-07-10T15:23:40.670 回答