JQuery中的顺序对话执行

Question

我正在尝试使用JQuery对话框来确认从不同的表中删除不同的记录，因此它是从代码中的不同位置引用的div（重用对话框以确认不同的操作）。 我正在使用这个例子：http://jqueryui.com/dialog/#modal-confirmation

由于每次调用都需要确认一个非常不同的操作，我不能只是将代码放在回调中执行对话选项按钮的确定或取消按钮{}

我想要像VB的MsgBox这样的东西，返回值表示按下按钮（无论是'Ok'，'Accept'还是'close'......）。 像这样：

if ( $(target_dialog).dialog('open') == 'Ok'){
    // Do something awesome
}else if( $(target_dialog).dialog('open') == 'Cancel') {
    // Do something not that awesome
}

感谢您的帮助。

编辑：这就像这里的JS confirm（）示例（http://www.w3schools.com/js/tryit.asp?filename=tryjs_confirm），但我不希望它是一个弹出窗口，而是一个可自定义且灵活的jqueryui对话框。

EDIT2：就像@vishwanath建议

一样

$("#dialog-confirm").dialog({
//height, modal, width... settings
buttons : {
    "OK": function() { 
        // here is the magic
            action = $(this).data('action');
        var actionToPerform = actions[action];
        actionToPerform.call(this);
        // end of magic
        $( this ).dialog( 'close' );
    }, 
    Cancel: function() {
        console.log("non awesome stuff here");
        $( this ).dialog( 'close' );
    }
}
});


var actions = {
action1 : function(){
    console.log(''Do action1 stuff here);
}, 
action2 : function(){
    console.log('Do action2 stuff here');
}
// and so on...
}

来自不同的父母可以针对不同的答案采取不同的行动。

$( '#dlgConfirm' ).data('action', 'action1').dialog( 'open' );

感谢。

Answer 1

一种可能的解决方案是使用jquery UI的自定义选项。

根据以下内容创建一个模式自定义选项，该选项将在创建对话时动态设置。在您的点击处理程序中检查该选项，并根据您的模式使用该模式选择正确的操作。

var mode = 'edit'; //Set this dynamically
$("#dialog-confirm").dialog({
    height : 140,
    modal : true,
    mode : mode,
    buttons : [ {
        text : "OK",
        click : function(event) {
            var mode = $("#dialog-confirm").dialog('option', mode);
            var actionToPerform = actions[mode];
            actionToPerfom.call(this, event);
        }
    }, 
    {
        text : "Cancel",
        click : function(event, ui) {
            console.log("non awesome stuff here");
        }
    } ]
});


var actions = {
    edit : function(){
        console.log(''Do Edit stuff here);
    }, 
    delete : function(){
        console.log('Do delete stuff here');
    }

}

Answer 2

您可以使用Promises（也称为“延迟对象”）来模拟在关闭对话框后返回值的函数。将其与模态对话框相结合，以确保用户在关闭该对话框之前无法执行任何其他操作：

function myConfirm() {
    my def = $.Deferred();
    $('#myDiv').dialog({
       modal: true,
       buttons: [ {
           'ok': def.resolve,
           'cancel': def.reject
       } ]
    });
    return def.promise();
}

（添加用于参数化对话的代码）

然后：

myConfirm().done(function() {
    // user pressed OK
}).fail(function() {
    // user pressed Cancel
});