帶確認的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對話框

回答

相關問題