重用現有的jQuery UI對話框

我正在編寫一個Chrome擴展，當用戶單擊上下文菜單時，會向頁面添加一個彈出窗口。我使用activeTab權限執行此操作，將腳本注入到獲取選定文本的頁面上，執行一些操作，然後將信息添加到頁面上的浮動div。這個div是一個jQuery UI對話框。重用現有的jQuery UI對話框

問題是，由於activeTab的工作方式，我的腳本無法保持任何狀態 - 每次單擊上下文菜單時，腳本都會被重新注入並重新運行。如果我不關閉對話框，我可以毫無困難地添加內容。但是，如果我關閉對話框，我希望能夠重用已創建的對話框，但我無法弄清楚如何去做。

下面是一些代碼：

// Creating the dialog 
function createDialog() { 
    if (!$('#language_study_dialog').exists()) { // exists() just checks length>0 
    console.log("Dialog not created; creating now"); 
    $('body').append('<div id="language_study_dialog" title="Language Study">' 
     + '</div>'); 
    $('#language_study_dialog').dialog({position: 
     {my: "left top", at: "left top"} 
    }); 
    } 
    $('#language_study_dialog').dialog("open"); 
} 

// Because I don't have any state, I need to call this every time; I don't 
// know if the dialog has been created already or not. 
// `selection` is defined elsewhere 
createDialog(); 
$('#language_study_dialog').append("<p>Word: " + selection + "</p>");

如果我運行此腳本兩次，而在中間，東西做工精細關閉對話框 - 如預期的文本被追加，現在額外的元素被添加到DOM。但是，如果在連續執行此腳本之間關閉對話框，則會出現錯誤（cannot call methods on dialog prior to initialization）。

在另一方面，如果我叫$('#language_study_dialog').dialog();，而不是在上面createDialogdialog("open")，東西大多是工作，但該函數每次調用增加了jQuery UI的對話框東西的DOM，事情有時會導致混亂與一個以上的對話框。

是否有函數調用來重新初始化現有的jQuery對話框？我想我的選擇是刪除除了內部文本之外的所有東西，然後保存一個隱藏的div，每次腳本運行時我都會重新創建一個對話框。有更好的選擇嗎？

來源

2013-04-17 mattg

我已經爲您的問題提供了一個解決方案，請參閱您的當前設計是否可行。 – PSL

您是否刪除了答案？它錯過了一個關鍵問題，因爲我無法保留任何本地狀態，因爲腳本每次都會重新運行。但它確實讓我找出了正確的答案 - 腳本運行在同一頁面上，所以我可以在'window'中存儲一個全局變量。因此獲得初始'dialog（）'調用的返回值並將其存儲在'window ['dialog']'中。 – mattg

奇怪，現在我再次看到你的答案...不知道這是怎麼回事。 – mattg

好吧，我想通了，至少有一種方法可以做到這一點。可能還有更好的方法，但是這很有效。

我無法保留任何本地狀態，因爲每次單擊上下文菜單時都會重新執行腳本。因此，像var dialog = $('#language_study_dialog').dialog()這樣的東西不起作用 - dialog每次腳本運行時都會重置。但是，我可以將東西存儲在window中。因此，工作代碼如下所示：

function createDialog() { 
    if (window['dialog'] == undefined) { 
    console.log("Dialog not created; creating now"); 
    $('body').append('<div id="language_study_dialog" title="Language Study">' 
     + '</div>'); 
    window['dialog'] = $('#language_study_dialog').dialog({position: 
     {my: "left top", at: "left top"} 
    }); 
    } 
    window['dialog'].dialog("open"); 
}

來源

2013-04-17 01:25:02 mattg

重用現有的jQuery UI對話框

回答

相關問題