Boîte de dialogue de l'interface utilisateur jQuery avec les onglets AJAX Problème

Question

J'ai un problème avec les onglets jQuery Tools (AJAX) et la boîte de dialogue jQuery UI (en effectuant manuellement le chargement AJAX pour la boîte de dialogue). Le problème est que la boîte de dialogue est chargée et configurée spécifiquement pour l'onglet en cours (chargé sur la demande d'onglet via AJAX, ainsi que le contenu de l'onglet). jQuery UI, lors de la création de la boîte de dialogue, supprime le conteneur de sa position d'origine, ajoute son balisage et l'ajoute au corps.

Le problème est que la boîte de dialogue est maintenant en dehors du contenu de l'onglet et ne sera pas remplacée/supprimée lors des changements d'onglet suivants. Si l'utilisateur clique sur un autre onglet, ou sur le bouton Précédent (ces onglets ont un historique AJAX utilisant le hash d'URL, donc la page n'est pas rechargée), la boîte de dialogue est cassée mais n'est pas supprimée car jQuery UI Dialog l'a déplacé en dehors de le contenu de l'onglet. Il apparaît maintenant juste au bas du corps. J'ai écris un 'bidouillage' pour cela si l'utilisateur clique physiquement sur le bouton de fermeture, mais cela ne se déclenche pas si le bouton arrière est enfoncé ou qu'un autre onglet est chargé via AJAX et que l'interface utilisateur jQuery le déplace vers le bas du corps (Je ne sais pas comment/pourquoi ça fait ça!). Aucune suggestion? Et s'il vous plaît faites le moi savoir si je n'étais pas clair sur tout ça. Merci! (Voici ce que j'ai maintenant, qui enlève quand les utilisateurs se ferme physiquement avec succès la boîte de dialogue)

$('.openMyDialog').click(function() { 

        // Create div for dialog 
     $('body').append('<div id="modalContainer"></div>'); 

     // Load dialog with AJAX 
     $('#modalContainer').load('loadMyAjaxContent.html').dialog({ 
      modal: true, 
      width: 850, 
      open: function(type,data) { 
       // Remove from bottom of body and put it back into the tab's content 
       $(this).parent().appendTo('.panes div:first'); 
      }, 
      close: function() { 
       $(this).dialog('destroy'); 
       $('#modalContainer').remove(); 
      } 
     }); 


    }); 

Answer 1

En supposant que la mise en place d'avoir une page principale avec un groupe d'onglets jQuery Ajax et chaque onglet ajax-charge une page dans la page content-panel/div.

page.html

----/home\---/users\--- 
|<div id="page-content">| 
| page content gets | 
| loaded in here  | 
|</div>     | 

Dans la page qui obtient ajax'd dans de l'onglet, mettez ce en haut:

ie. dans users.html

$(document).ready(function() 
{ 
    $('.delete-user-form').each(function(){ 
     if($('.delete-user-form').length > 1) 
      $(this).detach(); 
    }); 

    $('#delete-user').dialog({ 
     autoOpen: false, 
     height: 200, 
     width: 300, 
     modal: true, 
     buttons: { 
      Cancel: function() { 
       $(this).dialog('close'); 
      }, 
      'Save': function() { 
       $('#delete-user-form').submit(); 
       $(this).dialog('close'); 
      } 
     } 
    }); 

    $('#delete-user-button').click(function(){ 
     $('#delete-user').dialog('open'); 
    }); 
}); 

Et c'est la forme préparée dans users.html qui sera tourné dans la boîte de dialogue:

<div id="delete-user" class="delete-user-form" title="Delete User" style="display:none;"> 
    <form action="/admin/users/delete" id="delete-user-form" method="POST"> 
     <input type="hidden" id="user-id" name="userID" /> 
     <table cellspacing="0" cellpadding="5px" border="0" id="delete-user-form-table" style="display:none;"> 
      <tr> 
       <td> 
        Do you really want to delete: 
       </td> 
       <td> 
        <input type="text" id="user-name" /> 
       </td> 
      </tr> 
     </table> 
    </form> 
</div> 

Maintenant que l'OP décrit, chaque fois que l'utilisateur passe entre les onglets et revient à cette page, la boîte de dialogue mod div (id = "delete-user") est dupliquée.

Le premier bit de javascript parcourt toutes les boîtes de dialogue dupliquées et supprime toutes les autres sauf la dernière du DOM, vous n'en trouverez donc qu'une seule.

Placez un bouton/lien/etc sur la page avec l'ID spécifié dans le bit supérieur pour ouvrir la boîte de dialogue.

ie. De cette manière, l'ouverture de la boîte de dialogue empêche la duplication trouvée par l'OP lorsqu'il a omis: autoOpen: false, dans les options de configuration de la boîte de dialogue et a appelé la boîte de dialogue directement.