{"id":2837,"date":"2014-02-23T08:16:40","date_gmt":"2014-02-23T08:16:40","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/02\/23\/reuse-existing-jquery-ui-dialog-collection-of-common-programming-errors\/"},"modified":"2014-02-23T08:16:40","modified_gmt":"2014-02-23T08:16:40","slug":"reuse-existing-jquery-ui-dialog-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2014\/02\/23\/reuse-existing-jquery-ui-dialog-collection-of-common-programming-errors\/","title":{"rendered":"Reuse existing jQuery UI dialog-Collection of common programming errors"},"content":{"rendered":"

I’m writing a chrome extension that adds a popup to a page when a user clicks on a context menu. I’m doing this with the activeTab permission, injecting a script onto the page that gets the selected text, does some stuff with it, and adds the information to a floating div on the page. This div is a jQuery UI dialog.<\/p>\n

The problem is that, because of the way activeTab works, my script can’t keep any state – every time the context menu is clicked on, the script gets re-injected and rerun. If I don’t close the dialog, I can add things to it without any trouble. But if I close the dialog, I want to be able to reuse the dialog that was already created, and I can’t figure out how to do it.<\/p>\n

Here’s some code:<\/p>\n

\/\/ Creating the dialog\nfunction createDialog() {\n  if (!$('#language_study_dialog').exists()) { \/\/ exists() just checks length>0\n    console.log(\"Dialog not created; creating now\");\n    $('body').append(''\n        + '');\n    $('#language_study_dialog').dialog({position:\n        {my: \"left top\", at: \"left top\"}\n    });\n  }\n  $('#language_study_dialog').dialog(\"open\");\n}\n\n\/\/ Because I don't have any state, I need to call this every time; I don't\n\/\/ know if the dialog has been created already or not.\n\/\/ `selection` is defined elsewhere\ncreateDialog();\n$('#language_study_dialog').append(\"
Word: \" + selection + \"

\");\n<\/code><\/pre>\n
If I run this script twice, without closing the dialog in between, things work fine – the text gets appended as expected, and now extra elements get added to the DOM. But if I close the dialog in between successive executions of this script, I get an error (cannot call methods on dialog prior to initialization<\/code>).<\/p>\n
On the other hand, if I call $('#language_study_dialog').dialog();<\/code> instead of dialog(\"open\")<\/code> in createDialog<\/code> above, things mostly work, but every call to the function adds the jQuery UI dialog stuff to the DOM, and things sometimes get messy with more than one dialog box.<\/p>\n
Is there a function call to just reinitialize an existing jQuery dialog? I suppose my alternative is to remove everything but the inner text on close, and just save a hidden div that I remake into a dialog every time the script is run. Is there a better option?<\/p>\n
    \n
  1. \n
    Ok, I figured it out, at least one way to do it. There might still be a better way, but this worked.<\/p>\n
    I can’t keep any local state, because the script gets re-executed every time the context menu is clicked. So things like var dialog = $('#language_study_dialog').dialog()<\/code> don’t work – dialog<\/code> gets reset every time the script is run. But, I can store things in window<\/code>. So the working code looks like this:<\/p>\n
    function createDialog() {\n  if (window['dialog'] == undefined) {\n    console.log(\"Dialog not created; creating now\");\n    $('body').append(''\n        + '');\n    window['dialog'] = $('#language_study_dialog').dialog({position:\n        {my: \"left top\", at: \"left top\"}\n    });\n  }\n  window['dialog'].dialog(\"open\");\n}\n<\/code><\/pre>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    I’m writing a chrome extension that adds a popup to a page when a user clicks on a context menu. I’m doing this with the activeTab permission, injecting a script onto the page that gets the selected text, does some stuff with it, and adds the information to a floating div on the page. This […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2837","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/2837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=2837"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/2837\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=2837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=2837"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=2837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}