jQuery对话框在打开链接之前确认答案

【问题标题】：jQuery dialog confirm before opening linkjQuery对话框在打开链接之前确认
【发布时间】：2012-07-16 23:29:32
【问题描述】：

我有一个表格，其中填充了数据库中的数据，其中每一行都有一个单元格，里面有一个锚元素。这个锚点会指向同一个页面，但有一个查询字符串告诉 php 哪一行包含它应该删除的数据。

当用户单击锚点时，我需要打开一个 jQuery 对话框，要求他在加载 url 之前确认他的意图。 “取消”按钮应该关闭对话框并且什么都不做。然后“确定”按钮应该让 URL 打开。

非常感谢任何帮助。

// 使用“我尝试过的”进行编辑。这是我第一次弄乱 jQuery，学习的时间已经不多了... =(

jQuery(document).ready(function(){
var $dialog = jQuery('<div class='msg_dialog'></div>')
    .html('Are you sure you want to do this?')
    .dialog({
        autoOpen: false,
        title: 'Confirm action',
        buttons: [{
            text: "Cancel",
            click: function(){
                jQuery(this).dialog("close");
            }
        }] // didn't even try the OK button since I couldn't even get the dialog opened
    });

jQuery('#confirm_del').click(function(){
    $dialog.dialog('open');
    return false;
});
});

【问题讨论】：

What have you tried?
对不起。我已经编辑了我的问题。
您应该使用POST，而不是GET（查询字符串）。 Read this。（有一条评论——That's why you should always POST for changing actions.——总结一下。）
有趣的链接，谢谢。好吧，这是我正在编写的 wordpress 插件的一部分。用户必须登录才能看到任何东西，所以我相信没有任何机器人能够在不发现一些管理员密码的情况下进入。无论如何，在通过单击链接而不是通过提交表单来更改操作的情况下，如何使用 POST？

标签： php jquery html jquery-ui jquery-ui-dialog

【解决方案1】：

$("a").on("click", function(e) {
    var link = this;

    e.preventDefault();

    $("<div>Are you sure you want to continue?</div>").dialog({
        buttons: {
            "Ok": function() {
                window.location = link.href;
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });
});

示例： http://jsfiddle.net/uRGJD/

（重定向到 Google 在 JSFiddle 上不起作用，但应该在普通页面上起作用）

【讨论】：

您可以使用top.location 代替window.location 导航到Google：jsfiddle.net/gilly3/uRGJD/1
非常感谢您的意见。但是我已经尝试了您的建议，但它对我不起作用。我不得不将选择器“a”更改为“.myclass”，因为行数未知。这可能是问题所在？
我知道 jQuery 已加载并运行，因为链接停止工作 (e.preventDefault())，但不会弹出对话框。有什么建议吗？
你也在加载 jQueryUI 吗？
是的。我忘了提到它是一个 wordpress 插件，所以我使用这两行来注册和排队脚本： wp_register_script( 'dialog-box', plugins_url( '/js/dialog-box.js', FILE ), 数组('jquery-ui-core')); wp_enqueue_script('对话框');

【解决方案2】：

如何使用：

<a href="<?php echo 'your_url'.'?query_string='.$query_string ?>" onclick="return confirm('Are your sure?')">
     Go
</a>

【讨论】：

这个问题具体说的是jQuery Dialog吗？
是的，问题确实是 jQuery Dialog，我认为很多用户将能够轻松地提供这样的答案，但专注于手头的问题，我只是认为提出一些建议可能会有所帮助简单一点，无论如何仍然可以解决问题。 :)
感谢您的意见。看起来不错。但我正在编码的不是模板页面。这是一个wordpress插件，看起来我进不去php，所以我无法解决引号的困境。
最佳答案.. 当你在 1 行代码中得到这份工作时，为什么事情会变得复杂
正是我想要的

【解决方案3】：

您可以创建一个对话框来为您创建按钮，但我喜欢您自己创建按钮的方法，这样您就可以使用真实链接而不是使用 javascript 进行导航。

工作演示： http://jsfiddle.net/gilly3/sdzbB/

<div id="dialog-confirm">
    <div class="message">Are you sure?</div>
    <div class="buttons">
        <a class="cancel" href="#">Cancel</a>
        <a class="ok" href="#">Ok</a>
    </div>
</div>

$("#dialog-confirm").dialog({ autoOpen: false }).find("a.cancel").click(function(e){
    e.preventDefault();
    $("#dialog-confirm").dialog("close");
});
$("a[href]:not(#dialog-confirm a)").click(function(e) {
    e.preventDefault();
    $("#dialog-confirm")
        .dialog("option", "title", $(this).text())
        .dialog("open")
        .find("a.ok").attr({
            href: this.href,
            target: this.target
        });
});

使用真实链接而不是location.href = link 的好处是，您可以获得各种内置的好东西，例如在新选项卡中打开链接的鼠标快捷方式、将链接拖动到书签栏或桌面、将链接复制到剪贴板的能力、通过选项卡访问键盘等。

【讨论】：

这是一个很好的答案。但是，您答案上的 Jquery 代码对我不起作用，但您的 JsFiddle 上的代码对我有用。
@DavidAddoteye - 谢谢。我已将 jsfiddle 代码复制到我的答案中。

【解决方案4】：

您应该防止链接的默认行为可以像此代码一样完成。

$('.tableId tr td a').click(function(event){
    //code to display confirmation dialog  
    event.preventDefault();

  }

您可以使用此 JQuery 插件进行确认对话框。http://jqueryui.com/demos/dialog/#modal-confirmation

【讨论】：