如何在Jquery UI对话框中实现"确认"对话框？

Question

我尝试使用JQuery UI Dialog来替换丑陋的javascript:alert()盒子.在我的场景中,我有一个项目列表,并且在每个项目的旁边,我会为每个项目都有一个"删除"按钮.psuedo html设置将是以下内容:

<ul>
    <li>ITEM <a href="url/to/remove"> <span>$itemId</span>
    <li>ITEM <a href="url/to/remove"><span>$itemId</span>
    <li>ITEM <a href="url/to/remove"><span>$itemId</span>
</ul>

<div id="confirmDialog">Are you sure?</div>

在JQ部分,在文档准备好的时候,我首先将div设置为带有必要按钮的模态对话框,然后将那些"a"设置为在删除前触发确认,如:

$("ul li a").click(function() {
  // Show the dialog    
  return false; // to prevent the browser actually following the links!
}

好的,这是问题所在.在初始化时,对话框将不知道谁(项目)将启动它,以及项目ID(!).如何设置这些确认按钮的行为,如果用户仍然选择YES,它将按照链接删除它？

Answer 1

我只需要解决同样的问题.使其工作的关键是dialog必须在click事件处理程序中部分初始化您要使用确认功能的链接(如果您想将其用于多个链接).这是因为必须将链接的目标URL注入事件处理程序以进行确认按钮单击.我使用CSS类来指示哪些链接应该具有确认行为.

这是我的解决方案,抽象出来以适合一个例子.

<div id="dialog" title="Confirmation Required">
  Are you sure about this?
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#dialog").dialog({
      autoOpen: false,
      modal: true
    });
  });

  $(".confirmLink").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");

    $("#dialog").dialog({
      buttons : {
        "Confirm" : function() {
          window.location.href = targetUrl;
        },
        "Cancel" : function() {
          $(this).dialog("close");
        }
      }
    });

    $("#dialog").dialog("open");
  });
</script>

<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>

我相信这对你有用,如果你可以用CSS类生成你的链接(confirmLink在我的例子中).

这是一个包含代码的jsfiddle.

在充分披露的利益,我会注意到,我花在这方面的问题了几分钟,我提供了一个类似的答案,这个问题,这也是没有当时是一个公认的答案.

Answer 2

我发现保罗的答案并不完全正常,因为在点击事件实例化对话框后,他设置选项的方式不正确.这是我的代码正在运行.我并没有根据保罗的例子来定制它,但它只是猫的胡须在一些元素方面的不同命名.你应该能够解决它.更正位于click事件按钮的对话框选项的setter中.

$(document).ready(function() {

    $("#dialog").dialog({
        modal: true,
        bgiframe: true,
        width: 500,
        height: 200,
        autoOpen: false
    });


    $(".lb").click(function(e) {

        e.preventDefault();
        var theHREF = $(this).attr("href");

        $("#dialog").dialog('option', 'buttons', {
            "Confirm" : function() {
                window.location.href = theHREF;
            },
            "Cancel" : function() {
                $(this).dialog("close");
            }
        });

        $("#dialog").dialog("open");

    });

});

希望这有助于其他人,因为这篇文章最初让我走上了正确的轨道我认为我最好发布更正.

Answer 3

我为jquery ui确认对话框创建了一个自己的函数.这是代码

function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
  $('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">' + dialogText + '</div>').dialog({
    draggable: false,
    modal: true,
    resizable: false,
    width: 'auto',
    title: dialogTitle || 'Confirm',
    minHeight: 75,
    buttons: {
      OK: function () {
        if (typeof (okFunc) == 'function') {
          setTimeout(okFunc, 50);
        }
        $(this).dialog('destroy');
      },
      Cancel: function () {
        if (typeof (cancelFunc) == 'function') {
          setTimeout(cancelFunc, 50);
        }
        $(this).dialog('destroy');
      }
    }
  });
}

现在在代码中使用它,只需编写以下内容即可

myConfirm('Do you want to delete this record ?', function () {
    alert('You clicked OK');
  }, function () {
    alert('You clicked Cancel');
  },
  'Confirm Delete'
);

继续.

Answer 4

简单而简短的解决方案,我刚尝试过它的工作原理

  $('.confirm').click(function() {
    $(this).removeClass('confirm');
    $(this).text("Sure?");
    $(this).unbind();
    return false;
  });

然后只需将class ="confirm"添加到您的链接即可!

Answer 5

这是我的解决方案..我希望它可以帮助任何人.它是在飞行中而不是复制的,因此请原谅我的任何错误.

$("#btn").on("click", function(ev){
    ev.preventDefault();

    dialog.dialog("open");

    dialog.find(".btnConfirm").on("click", function(){
        // trigger click under different namespace so 
        // click handler will not be triggered but native
        // functionality is preserved
        $("#btn").trigger("click.confirmed");
    }
    dialog.find(".btnCancel").on("click", function(){
        dialog.dialog("close");
    }
});

我个人更喜欢这个解决方案:)

编辑:抱歉..我真的应该详细解释一下.我喜欢它,因为在我看来它是一个优雅的解决方案.当用户点击需要首先确认的按钮时,事件将被取消.单击确认按钮时,解决方案不是模拟链接单击,而是触发原始按钮上的相同本机jquery事件(单击),如果没有确认对话框,则会触发该按钮.唯一的区别是不同的事件命名空间(在本例中为"已确认"),因此不再显示确认对话框.然后,Jquery本机机制可以接管并且事情可以按预期运行.另一个优点是它可以用于按钮和超链接.我希望我很清楚.