在打开链接之前，使用jQuery对话框进行确认

Question

我有一个表格，里面填充着来自数据库的数据，每一行都有一个包含锚点元素的单元格。这个锚点会导向同一页，但是通过查询字符串告诉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;
});
});

- rzb

---

你尝试过什么？（http://whathaveyoutried.com/） - Joseph Silber

抱歉，我已经编辑了我的问题。 - rzb

你应该使用 POST，而不是 GET（查询字符串）。阅读此文。（有一条评论 - 这就是为什么在更改操作时总是应该使用 POST。 - 概括了它。） - uınbɐɥs

有趣的链接，谢谢。这是我正在编写的WordPress插件的一部分。用户必须登录才能看到任何内容，因此我认为没有机器人能够在不发现某个管理员密码的情况下进入。无论如何，在单击链接而非提交表单的情况下，我该如何使用POST？ - rzb

Answer 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/

(在JSFiddle上重定向到Google不起作用，但在普通页面上应该可以)

- Andrew Whitaker

---

你可以使用 top.location 替代 window.location 来导航到 Google: http://jsfiddle.net/gilly3/uRGJD/1/ - gilly3

非常感谢您的建议。但是我尝试了您的建议，但并没有起作用。由于行数未知，我不得不将选择器“a”更改为“.myclass”。这可能是问题所在吗？ - rzb

我知道jQuery已经加载并且正常工作，因为链接停止工作了（e.preventDefault()），但是对话框没有弹出。有什么建议吗？ - rzb

你也在加载jQueryUI吗？ - Andrew Whitaker

是的。我忘了提到它是一个WordPress插件，所以我使用这两行代码来注册和排队脚本：wp_register_script( 'dialog-box', plugins_url( '/js/dialog-box.js', FILE ), array( 'jquery-ui-core' ) ); wp_enqueue_script( 'dialog-box' ); - rzb

Answer 2

使用以下方法如何：

如何使用：

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

- Leon

---

问题明确要求使用jQuery对话框，是吗？ - Shaunak

是的，问题确实涉及到jQuery对话框，我认为很多用户都可以轻松地提供这样的答案，但是关注手头的问题，我认为建议一些更简单的东西可能会有所帮助，而且仍然可以解决问题。 :) - Leon

谢谢你的输入。看起来不错。但是我正在编写的并不是一个模板页面，而是一个WordPress插件。在这个插件中，我似乎无法进出PHP环境，所以无法解决引号的困扰。 - rzb

最佳答案：为什么要把事情复杂化，当您只需一行代码就能完成工作呢？ - suraj jain

正是我所需要的。 - Lucas Bustamante

Answer 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的好处在于，您可以获得各种内置好处，例如使用鼠标快捷键在新选项卡中打开链接、将链接拖动到书签栏或桌面、将链接复制到剪贴板以及通过Tab键进行键盘访问等。

- gilly3

---

这是一个很好的答案。然而，你回答中的Jquery代码对我不起作用，但是你JsFiddle上的代码可以。 - David Addoteye

@DavidAddoteye - 谢谢。我已经将 jsfiddle 代码复制到我的答案中。 - gilly3

Answer 4

您应该阻止链接的默认行为，可以通过以下代码实现。

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

  }      

您可以使用这个 JQuery 插件来创建确认对话框。http://jqueryui.com/demos/dialog/#modal-confirmation

- Bishnu Paudel