将变量传递给JQuery UI对话框

Question

我正在使用PHP删除记录.我想使用JQuery UI对话框来确认操作,但我不知道如何将变量(我的RecordID)传递给重定向URL函数,或者允许URL访问window.location.href.

$("#confirm" ).dialog({
resizable: false,
autoOpen: false,
modal: true,
buttons: {
    'OK': function() {
            window.location.href = 'url and myvar??';
        $( this ).dialog( "close" );
        },
    'Cancel': function() {
        $( this ).dialog( "close" );
        }
    }
});


$("#delete").click(function() {
    $("#confirm").dialog( "open" ).html ( "Are U Sure?" );
    return false;
});

HTML

<a href='index.php?recordid=$row[recordid]' id='delete'>DELETE</a>

有没有办法做到这一点？

Answer 1

您可以尝试使用.data()方法为您存储数据.看一下这个答案将 数据传递给jQuery UI对话框

例如,要传递变量,可以在打开对话框之前使用数据函数存储它

$("#dialog_div")
.data('param_1', 'whateverdata')
.dialog("open");

然后你可以通过以下方式得到这个:

var my_data = $("#dialog_div").data('param_1')

Answer 2

您想要在单击时更改对话框的配置(在这种情况下,"确定"按钮的行为).为此你有很多解决方案,所有这些都是丑陋的(imo).我会建议动态生成一个对话框,并在使用它后将其销毁,如下所示:

$("#delete").click(function(ev) {
    ev.preventDefault(); // preventDefault should suffice, no return false
    var href = $(this).attr("href");
    var dialog = $("<div>Are you sure?</div>");

    $(dialog).dialog({
        resizable: false,
        autoOpen: true,
        modal: true,
        buttons: {
            'OK': function() {
                window.location = href;
                $( this ).dialog( "close" );
            },
            'Cancel': function() {
                $( this ).dialog( "close" );
            }
        },
        close: {
            $( this ).remove();
        }
    });
});

或者甚至更好,将确认对话框封装到一个函数中,以便您可以重用它,如下所示:

function confirmDialog(msg) {
    var dialog = $("<div>"+msg+"</div>");
    var def = $.Deferred();

    $(dialog).dialog({
        resizable: false,
        autoOpen: true,
        modal: true,
        buttons: {
            'OK': function() {
                def.resolve();
                $( this ).dialog( "close" );
            },
            'Cancel': function() {
                def.reject();
                $( this ).dialog( "close" );
            }
        },
        close: {
            $( this ).remove();
        }
    });
    return def.promise();
}

然后像这样使用它

confirmDialog("are your sure?").done(function() {
    window.location = $(this).attr("href"); 
}).fail(function() {
    // cry a little
});

在关闭对话框之前,您可能必须检查延迟对象是否已被拒绝或已解决,以确保关闭时确认拒绝(而不仅仅是按下"取消"按钮).这可以使用def.state()==="pending"条件来完成.

有关jquery延迟的更多信息:http://api.jquery.com/category/deferred-object/