How to replicate the dialog functionality of jQuery UI in Jetpack?

Question

I'm trying to get a very basic and simple dialog in my Javascript, actually I'm trying to replicate something very similar to this example from jqueryui website:

<script type="text/javascript">
   $(function() {
           $("#dialog").dialog({
                   bgiframe: true,
                   height: 140,
                   modal: true
           });
   });
   </script>

<div class="demo">
 <div id="dialog" title="Basic modal dialog">
   <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
 </div>

...

In order to achieve this I run a function testJQ but I cannot get the desired effect. The div and its inner p is added and I can see the contents of p but I cannot see "Basic modal dialog" and I cannot move it around the page. Am I missing something? Here is my code:

function testJQ() {
   var doc = jetpack.tabs.focused.contentDocument;
   var win = jetpack.tabs.focused.contentWindow;

   $.get("http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js",
function(js) {

   var script = doc.createElement("script");
   script.innerHTML = js;
   doc.body.appendChild(script);

   $.get("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js",
   function(js) {

           var script = doc.createElement("script");
           script.innerHTML = js;
           doc.body.appendChild(script);

       $.get("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css",
    function(js) {

           var style = doc.createElement("style");
           style.innerHTML = js;
           doc.getElementsByTagName('HEAD')[0].appendChild(style);

           var script = doc.createElement("script");
           script.innerHTML = js;
           doc.body.appendChild(script);

           script = doc.createElement("script");
           script.innerHTML += '$(function() {';
           script.innerHTML += '$("#dialog").dialog({'
           script.innerHTML += '      bgiframe: true, height: 140, modal: true';
           script.innerHTML += '  });';
           script.innerHTML += '});';
           doc.body.appendChild(script);

           divDialog =  doc.createElement("div");
           divDialog.setAttribute('id', 'dialog');
           divDialog.setAttribute('title', 'Basic Dialog');
           divDialog.innerHTML = '<p>This is the default dialog which is useful
 for displaying information. The dialog window can be moved, resized
 and closed with the X icon.</p>';
           doc.body.appendChild(divDialog);
           });
        });
    });
 }

Answer 1

You're inserting the script that invokes the jQuery dialog before you're inserting the div of the dialog itself. Therefore $("#dialog") matches no elements, so the dialog() call on the empty wrapper silently does nothing.

You can get away with this in a simple HTML page because you're using $(function) to register an onready function that only gets called once the whole document is loaded. But in the Jetpack version, the whole document is already loaded, so inserting the onready script gets it called straight away.

If this is an arbitrary third-party document you're inserting content into, this is something you should be very careful with. Loading a large library like jQuery&UI into an arbitrary page that won't be expecting it (rather than one particular page you're targeting) is a bit rude and potentially fragile. Plus what happens if the document already defines an element with id dialog? And what if it has style rules that cause the dialog to render in unexpected ways? And so on.

Answer 2

I have solved my problem (of course there may be much better, simpler, more elegant ways of achieving this within Jetpack but I couldn't discover that yet):

function testJQ() {
var doc = jetpack.tabs.focused.contentDocument;
var win = jetpack.tabs.focused.contentWindow;

$.get("http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js", function(js) {

var script = doc.createElement("script");
script.innerHTML = js;
doc.getElementsByTagName('HEAD')[0].appendChild(script);

$.get("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js", function(js) {

    var script = doc.createElement("script");
    script.innerHTML = js;
    doc.getElementsByTagName('HEAD')[0].appendChild(script);

    $.get("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css", function(js) {

    var style = doc.createElement("style");
    style.innerHTML = js;
    doc.getElementsByTagName('HEAD')[0].appendChild(style);

    script = doc.createElement("script");
    script.innerHTML += 'var myDialogFunc = function () {';
    script.innerHTML +=  '$("<div id=dialog title=\\"Basic Dialog\\"> <p>The dialog window can be moved, resized and closed with the X icon.</p></div>").appendTo("body");';
    script.innerHTML += '$("#dialog").dialog({'
    script.innerHTML += '      bgiframe: true, height: 140, modal: true';
    script.innerHTML += '  });';
    script.innerHTML += '};';
    doc.body.appendChild(script);
    win.wrappedJSObject['myDialogFunc']();      
    });
});
});
}