Reuse existing jQuery UI dialog-Collection of common programming errors

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.

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.

Here’s some code:

// Creating the dialog
function createDialog() {
  if (!$('#language_study_dialog').exists()) { // exists() just checks length>0
    console.log("Dialog not created; creating now");
    $('body').append(''
        + '');
    $('#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("
Word: " + selection + "

");

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).

On the other hand, if I call $('#language_study_dialog').dialog(); instead of dialog("open") in createDialog 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.

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?

1. Ok, I figured it out, at least one way to do it. There might still be a better way, but this worked.

   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() don’t work – dialog gets reset every time the script is run. But, I can store things in window. So the working code looks like this:

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