重用现有的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对话框

回答

相关问题