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

问题描述

我尝试使用 JQuery UI Dialog 来替换丑陋的 javascript:alert() 框.在我的场景中，我有一个项目列表，在每个项目旁边，我会为每个项目设置一个删除"按钮.伪 html 设置如下:

<li>ITEM <a href="url/to/remove"><span>$ite​​mId</span><li>ITEM <a href="url/to/remove"><span>$ite​​mId</span><li>ITEM <a href="url/to/remove"><span>$ite​​mId</span>
<div id="confirmDialog">你确定吗?</div>

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

$("ul li a").click(function() {//显示对话框返回假；//防止浏览器实际跟踪链接！}

好的，问题来了.在初始化期间，对话框不知道谁(项目)将启动它，也不知道项目 ID(！).我该如何设置这些确认按钮的行为，以便在用户仍然选择是"的情况下，它将按照链接将其删除?

解决方案

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

这是我的解决方案，抽象出来以适合示例.

<script type="text/javascript">$(document).ready(function() {$("#dialog").dialog({自动打开:假，模态:真});});$(".confirmLink").click(function(e) {e.preventDefault();var targetUrl = $(this).attr("href");$("#dialog").dialog({纽扣 : {确认":函数(){window.location.href = targetUrl;},取消":函数(){$(this).dialog("close");}}});$("#dialog").dialog("打开");});<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">点击这里</a><a class="confirmLink" href="http://anotherSensitiveLink">或者，您可以点击此处</a>

如果您可以使用 CSS 类生成链接(在我的示例中为 confirmLink)，我相信这对您有用.

这是一个带有代码的 jsfiddle.

为了充分披露，我会注意到我在这个特定问题上花了几分钟时间，并且我提供了与 这个问题，当时也没有被接受的答案.

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>

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!
}

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?

解决方案

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>

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

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