JQuery中的顺序对话执行

时间:2013-05-06 07:07:52

标签: jquery jquery-ui-dialog

我正在尝试使用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' );

感谢。

2 个答案:

答案 0 :(得分:0)

一种可能的解决方案是使用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');
    }

}

答案 1 :(得分:0)

您可以使用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
});