web-dev-qa-db-fra.com

dialogue jQuery avec contenu dynamique

Je veux 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 ceci 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>

Lorsque j'essaie d'exécuter le JS dans IE7, l'erreur suivante apparaît sur le $ (newDiv) .dialog (); line: L'objet ne prend pas en charge cette propriété ou cette méthode.

Quelqu'un sait ce qui se passe?

jqueryjquery-ui-dialog
20
DEH

Votre code fonctionne, vous pouvez le tester ici , cela signifie que vous avez probablement un problème d'inclusion de script, assurez-vous que vos fichiers se trouvent dans un dossier jsà côté de la page site root, utilisez plutôt /js.

Ou, envisagez d'utiliser un CDN .

Vous pouvez rendre votre code un peu plus efficace (je réalise que c'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();
58
Nick Craver

Voici une autre façon de créer des dialogues et leurs messages de manière dynamique:

     $('<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

Voyez-le en action: http://jsfiddle.net/DYbwb/

17
Chad Kuehn

Le code est bon, vous avez besoin d’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>

0
Leon