Boîte de dialogue jQuery avec contenu dynamique

Question

Je souhaite créer une boîte de dialogue jQuery à la volée. J'utilise ceci:

var newDiv = $(document.createElement('div')); 
$(newDiv).html('hello there'); 
$(newDiv).dialog(); 

J'ai alors cela dans l'en-tête html:

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script> 

Quand j'essayez d'exécuter le JS dans IE7 je reçois l'erreur suivante sur le $ (nouveauDiv) .dialog() line: L'objet ne supporte pas cette propriété ou cette méthode.

Quelqu'un sait ce qu'il se passe?

Answer 1

Votre code fonctionne, vous pouvez le tester here, cela signifie que vous avez probablement à côté de la page un script incluent problème, assurez-vous que vos fichiers sont dans un dossier js, ou si vous l'intention d'être de la racine du site , utilisez /js à la place.

ou consider using a CDN.

Vous pouvez rendre votre code un peu plus efficace (je me rends compte qu'il est juste un test), comme ceci:

var newDiv = $(document.createElement('div')); 
newDiv.html('hello there'); 
newDiv.dialog(); 

Cela fonctionne parce que newDiv est déjà un élément jQuery, aucune raison de cloner l'objet chaque fois ... ou un peu plus court:

$('<div />').html('hello there').dialog(); 

Answer 2

Voici une autre façon de créer des dialogues et leurs messages dynamiquement:

 $('<div></div>').dialog({ 
     modal: true, 
     title: "Confirmation", 
     open: function() { 
      var markup = 'Hello World'; 
      $(this).html(markup); 
     }, 
     buttons: { 
      Ok: function() { 
      $(this).dialog("close"); 
      } 
     } 
     }); //end confirm dialog 

Voir en action: http://jsfiddle.net/DYbwb/

Answer 3

Le code est bon, ce que vous avez besoin est une référence de jquery et jquery ui

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>