Lancer la boîte de dialogue jQuery UI à partir d'un résultat de l'appel AJAX

Question

J'ai la page A qui appelle la page B en utilisant AJAX. La page B sera placée dans un conteneur div dans la page A. Dans le résultat (qui est la page B), il y a un code qui lancera une boîte de dialogue jQuery UI. La div pour le dialogue est également dans la page B. Cependant, cela ne fonctionne pas. Je devrais mettre le code d'initiation dans la page A. Donc, si je veux mettre le code d'initiation à la page B, que dois-je faire?

Le code d'initiation:

 

$('#dialog').dialog({ 
    bgiframe: true, 
    autoOpen: false, 
    width: 300, 
    height: 300, 
    modal: true, 
    resizable: false,   
    buttons: { 
     'Create an account': function() { }, 
     Cancel: function() { } 
    }, 
    close: function() { } 
}); 

J'ai aussi essayé d'utiliser $('div.dialog') comme le sélecteur (modifié l'identifiant de classe) et il fonctionne, mais chaque fois que je demande Page B (sans rechargement de la page A), le dialogue va se multiplier. Par exemple, la première fois que j'ai demandé la page B, une boîte de dialogue s'ouvre. La deuxième fois que j'ai demandé la page B, deux boîtes de dialogue s'ouvriront.

Answer 1

Votre approche est pas loin, vous êtes juste dupliquer la boîte de dialogue sur l'appel lors du chargement à chaque fois, donc destroy the previous one, donc au lieu de ceci:

$('div.dialog').dialog({ ...options... }); 

Appelez ce:

$('div.dialog').dialog('destroy').dialog({ ...options... }); 

Cela empêche l'instanciation de plusieurs boîtes de dialogue pour le même élément. Vous pouvez également vérifier si la boîte de dialogue a été créé sur cet élément encore, comme ceci:

$('div.dialog').filter(function() { 
    return $(this).closest('.ui-dialog').length === 0; 
}).dialog({ ...options... }); 

Cela crée la boîte de dialogue uniquement sur <div class="dialog"> éléments qui ne sont pas déjà enveloppés dans une boîte de dialogue.

Answer 2

Vous pouvez le faire en utilisant la fonction jQuery live avec une liaison d'événement personnalisée. Chaque fois que vous appelez la page B, vous devez déclencher votre événement personnalisé, de sorte que le nouvel élément de boîte de dialogue puisse être lié dans le gestionnaire d'événements. Le code d'initiation devrait être toujours dans la page A si vous suivez cette méthode.