30

我正在使用 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>

有没有好的方法来做到这一点？

4

4 回答 4

85

您可以尝试使用 .data() 方法为您存储数据。看看这个答案 Passing data to a jQuery UI Dialog

例如要传递一个变量，您可以在打开对话框之前使用 data 函数存储它

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

然后你可以通过以下方式取回：

var my_data = $("#dialog_div").data('param_1')
于 2013-02-15T16:50:51.590 回答
7

您想在单击时更改对话框的配置（在本例中为 Ok 按钮的行为）。为此，您有很多解决方案，所有这些都很难看（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 deferred 的更多信息：http: //api.jquery.com/category/deferred-object/

于 2013-02-15T16:45:09.100 回答
0

删除操作可能不应该使用 GET 来完成，但如果你想这样做，我建议在 jQuery 中使用 $.data，这样每个链接都有一个 data-record-id 属性。然后单击其中一个链接，它会弹出对话框，并在确认后将其添加到 URL 并重定向。 例子：

$(function(){
    $(".deleteLink").click(function(){
       var id = $(this).data("record-id");
       var myHref = $(this).attr('href');
        $("#confirmDialog").dialog({
            buttons:{
            "Yes": function()
                {
                    window.location.href = myHref + id;
                }
            }
        });
    });

});

<a class="deleteLink" data-record-id="1">Delete</a>
...
<div id="confirmDialog">
   <p>Are you sure?</p>
</div>
于 2013-02-15T16:52:28.917 回答
0

  1. HTML

    <a data-title="Title" data-content="content" data-mydata="1" class="confirmation-dialog" href="#">Link</a>

  2. JS

    $('.confirmation-dialog').confirm({ buttons: { Yes: function(){ console.log(this.$target.attr('data-mydata')); No: function(){ } } });

于 2019-01-05T23:25:56.093 回答