Comment répliquer la fonctionnalité de dialogue de jQuery UI dans Jetpack?

Question

Je suis en train d'obtenir un très basique et simple dialogue dans mon Javascript, en fait je suis en train de reproduire quelque chose de très similaire à cet exemple de site jQueryUI:

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

...

En Pour y parvenir, j'exécute une fonction testJQ mais je n'arrive pas à obtenir l'effet désiré. Le div et son p interne est ajouté et je peux voir le contenu de p mais je ne peux pas voir "Basic dialogue modal" et je ne peux pas le déplacer autour de la page. Est-ce que je manque quelque chose? Voici mon 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

J'ai résolu mon problème (bien sûr il peut y avoir beaucoup mieux, plus simple, des moyens plus élégants de réaliser cela dans Jetpack, mais je ne pouvais découvrir que encore):

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']();  
    }); 
}); 
}); 
} 

Answer 2

vous insérez le script qui appelle la boîte de dialogue jQuery avant vous insérez la div de la boîte de dialogue lui-même. Par conséquent $("#dialog") ne correspond à aucun élément, donc l'appel dialog() sur l'enveloppe vide ne fait rien en silence.

Vous pouvez vous en sortir avec une page HTML simple car vous utilisez $(function) pour enregistrer une fonction onready qui ne sera appelée qu'une fois le document entier chargé. Mais dans la version Jetpack, tout le document est déjà chargé, donc l'insertion du script onready l'appelle directement.

S'il s'agit d'un document tiers arbitraire dans lequel vous insérez du contenu, vous devez faire très attention. Le chargement d'une grande bibliothèque comme jQuery & UI dans une page arbitraire qui ne l'attendra pas (plutôt qu'une page particulière que vous ciblez) est un peu grossier et potentiellement fragile. Plus ce qui se passe si le document définit déjà un élément avec l'ID dialog? Et que se passe-t-il si des règles de style entraînent un rendu inattendu du dialogue? Etc.