如何实施“确认”在Jquery UI对话框中对话框？ [英] How to implement "confirmation" dialog in Jquery UI dialog?

问题描述

我试图使用JQuery UI对话框来替换丑陋的 javascript：alert（）框。
在我的场景中，我有一个项目列表，在每个人的旁边，我将为每个项目添加一个删除按钮。
psuedo html设置将会如下：

I am try to use JQuery UI Dialog to replace the ugly javascript:alert() box. In my scenario, I have a list of items, and next to each individual of them, I would have a "delete" button for each of them. the psuedo html setup will be something follows:

<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设置为触发以确认之前删除，如：

In JQ part, on document ready, I would first setup the div to be a modal dialog with necessary button, and set those "a" to be firing to confirmation before to remove, like:

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

确定，这是问题，在初始化时间内，对话框将不知道（项目）将被启动，还有项目ID （！）。如何设置这些确认按钮的行为，如果用户仍然选择YES，它将按照链接删除它？

OK, here's the problem. during the init time, the dialog will have no idea who (item) will fire it up, and also the item id (!). How can I setup the behavior of those confirmation buttons in order to, if the user still choose YES, it will follow the link to remove it?

推荐答案

我只是要解决同样的问题，这个工作的关键是对话框必须在点击您要使用确认功能的链接的事件处理程序（如果要使用thi s多个链接）。这是因为链接的目标URL必须注入到确认按钮单击的事件处理程序中。我使用CSS类来指示哪些链接应该具有确认行为。

I just had to solve the same problem. The key to getting this to work was that the dialog must be partially initialized in the click event handler for the link you want to use the confirmation functionality with (if you want to use this for more than one link). This is because the target URL for the link must be injected into the event handler for the confirmation button click. I used a CSS class to indicate which links should have the confirmation behavior.

这是我的解决方案，抽象出来适合一个例子。

Here's my solution, abstracted away to be suitable for an example.

<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 ，在我的例子中）。

I believe that this would work for you, if you can generate your links with the CSS class (confirmLink, in my example).

这是一个 jsfiddle 中的代码。

为了充分披露，我会注意到我花了几分钟时间就这个特定的问题，我提供了一个类似的答案：这个问题，当时也没有一个公认的答案。

In the interest of full disclosure, I'll note that I spent a few minutes on this particular problem and I provided a similar answer to this question, which was also without an accepted answer at the time.

这篇关于如何实施“确认”在Jquery UI对话框中对话框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！