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

问题描述

我正在尝试使用 JQuery UI Dialog 来替换丑陋的 javascript:alert() 框.在我的场景中，我有一个项目列表，在每个项目旁边，每个项目都有一个删除"按钮.伪 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(！).我如何设置这些确认按钮的行为，以便如果用户仍然选择是"，它将按照链接将其删除?

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?

推荐答案

我只需要解决同样的问题.让它工作的关键是 dialog 必须在 click 事件处理程序中为要使用确认功能的链接部分初始化(如果你想将此用于多个链接).这是因为必须将链接的目标 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，里面有代码.

Here is a jsfiddle with the code in it.

为了全面披露，我会注意到我在这个特定问题上花了几分钟，并且我为 这个问题，当时也没有公认的答案.

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屋！