带有确认的 jQuery UI 对话框答案

【问题标题】：jQuery UI Dialog with Confirmation带有确认的 jQuery UI 对话框
【发布时间】：2012-07-21 01:47:57
【问题描述】：

我有一个获取一行文本的 jQuery UI 对话框。如果此文本不包含在 localStorage 字典中，我将其插入到字典中。如果它存在，我想为用户提供不覆盖“ok”处理程序中现有条目的选项。

因为 jQuery UI 对话框是有状态的，并且在多个调用中持续存在，除非明确删除 (AFAICT)，所以我没有看到一条清晰的路径来呈现“你确定要核对你以前的条目吗？”警觉而不诉诸于……呃……警觉。

问题简明扼要：你能在 jQuery UI 对话框中创建一个确认框吗？

谢谢。

【问题讨论】：

简单地销毁对话框并重新创建它相对容易。 $('selector').dialog('destroy').dialog() 会做到的。话虽如此，我什至不确定为什么对话框是有状态的是一个问题。您始终可以配置有关它的内容，例如为单个呼叫显示的标题和文本。
有状态的本质是客户端 Web 应用程序中的一个问题，它可能想要呈现多个对话框——在我的例子中，一个对话框是一个已经打开的对话框的子级。为什么它是一个问题是 jQUI “记住”并重用了很多（状态），在某些情况下创建了被破坏的值和/或文本。我不能只销毁对话框 #1，因为对话框 #1 的 yes 处理程序的行为取决于对话框 #2 的是/否答案。

标签： javascript jquery jquery-ui

【解决方案1】：

我没有使用过 jQuery UI 对话框，但您始终可以创建自己的 html 元素并使用它们做任何您想做的事情，包括将它们分层放在 jQuery 对话框之上。

【讨论】：

【解决方案2】：

我猜你可以用谷歌搜索找到这些链接：

不管怎样，玩得开心：

干杯！！！

【讨论】：

我用谷歌搜索过这些链接（实际上是倒着的——第一个指向 Confirmation，第二个指向 Dialog）。您发布的第二个链接实际上指向了一篇博客文章，该文章解释了 jQuery 对话框的有状态特性和一些副作用。第二个很有趣，但 jQuery UI 的吸引力在于主题的一致性。但是，是的，我知道如何使用 Google，但是不，我的结果不是我所希望的。

【解决方案3】：

好的，我发现处理这个问题的最好方法是使用闭包。像这样（伪代码）：

getThingieName: handler(function() {
  var $dialog;
  $dialog = $('<div id="thingie-name-dialog" class="ui-widget"></div>').html("<p>Enter a name for this thingie</p>\n<input type=\"text\" id=\"dlg-thingie-name\" style=\"width: 80%\" />").dialog({
    autoOpen: false
  }, {
    title: 'enter a name',
    modal: true,
    buttons: {
      Add: function() {
        var value = $('#dlg-thingie-name').val();
        $(this).dialog('close');
        $('#thingie-name-dialog').remove();
        return handler(value);                  // <= closure to handle the onAdd
      },
      Cancel: function() {
        $(this).dialog('close');
        return $('#thingie-name-dialog').remove();
      }
    }
  });
  return $dialog.dialog('open');
}),

getConfirmation: function(message, handler) {
  var $dialog;
  $dialog = $('<div id="confirmation-dialog" class="ui-widget"></div>').html("<p>" + message + "</p>").dialog({
    autoOpen: false
  }, {
    title: 'confirm overwrite',
    modal: true,
    buttons: {
      Ok: function() {
        $(this).dialog('close');
        $('#confirmatio-dialog').remove();
        return handler(true);               // <= closure to handle onOk
      },
      Cancel: function() {
        $(this).dialog('close');
        $('#Thingie-name-dialog').remove();
        return handler(false);              // <= closure to handle onCancel
      }
    }
  });
  return $dialog.dialog('open');
}

// Calling sequence
Snippets.getSnippetName(function(value) {
  if (value == null) return false;
  if (localStorage.getItem(value)) {
    getConfirmation("This thingie, " + value + ", already exists. Overwrite?", function(response) {
      if (response) return localStorage.setItem(value, snippet);
    });
  } else {
    localStorage.setItem(value, snippet);
  }
}

这可能不是最佳代码，但通过将对话框嵌入到处理程序中，它确实使对话框的触发依赖于按钮推送。

【讨论】：