带确认的jQuery UI对话框

我有一个获取文本行的jQuery UI对话框。如果此文本未包含在localStorage字典中，则将其插入到字典中。如果它现在是，我想让用户选择不覆盖“ok”处理程序中的现有条目。带确认的jQuery UI对话框

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

这个问题，简洁地说：你可以在jQuery UI对话框中创建一个确认框吗？

谢谢。

2012-07-19 Steve Ross

简单地销毁一个对话框并重新创建对话是相对容易的。 '$（'selector'）。dialog（'destroy'）。dialog（）'会做到这一点。这就是说，我甚至不知道为什么这个对话框是有状态的问题。您可以随时对其进行配置，例如为个别呼叫显示的标题和文本。 – 2012-07-20 00:38:35

有状态性质是客户端Web应用程序中的一个问题，可能需要显示多个对话框 - 在我的情况下，将对话框视为已打开对话框的子对话框。为什么这是一个问题，jQUI“记住”并重用了很多状态，在某些情况下会创建重击值和/或文本。我不能只销毁对话框＃1，因为对话框＃1的yes处理程序根据对话框＃2的yes/no应答而行动。 – 2012-07-20 05:42:03

我没有使用过jQuery UI对话框，但是您可以随时创建自己的html元素并随意做任何事情，包括将它们分层放置在jQuery对话框的顶部。

来源

2012-07-19 23:39:33 Ariel

我想你可以用Google搜索东西，发现这些链接：

反正有它和调笑：

干杯！

来源

2012-07-20 12:46:27 GOK

我做了Google，我确实访问了这些链接（实际上它们是向后的 - 第一个指向Confirmation，第二个指向Dialog）。您发布的第二个链接实际上指向了一篇博文，该博文解释了jQuery对话框的有状态性以及一些副作用。第二个很有趣，但关于jQuery UI的东西有什么吸引力是主题的一致性。但是，是的，我知道如何使用谷歌，但不，我的结果不是我所希望的。 – 2012-07-20 15:52:35

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

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); 
    } 
}

这可能不是最优的代码，但它通过在处理器中嵌入他们做出依赖于按下按钮对话框的触发。

来源

2012-07-20 17:47:57

带确认的jQuery UI对话框

回答

相关问题