Boîte de dialogue jQuery UI - Dès que j'ajoute une seconde boîte de dialogue à l'application, elle se casse?

Question

J'ai ajouté une boîte de dialogue jQuery UI à mes Rails 3 application web comme suit:

permissions = $('<div id="dialog-content"></div>') 
.html('<div class="notification"><h4>Loading...</h4></div>') 
.dialog({ 
    autoOpen: false, 
    dialogClass: 'dialog', 
    width: 460, 
    minHeight: 80, 
    position: ['center',130], 
    open: function() { 
     $.ajax({url: '/stuff/'}) 
    }, 
    close: function() { 
     $('#dialog-content').html('<div class="notification"><h4>Loading...</h4></div>'); 
    }  
}); 

$(".teammember-dialog").live("click",function(){ 
    permissions.dialog('open'); 
    return false; 
}); 

Ce qui est déconcertant pour moi, je viens d'ajouter une autre boîte de dialogue pour mon application comme suit:

dialogstuff2 = $('<div id="dialog-content"></div>') 
.html('<div class="notification"><h4>Loading...</h4></div>') 
.dialog({ 
    autoOpen: false, 
    dialogClass: 'dialog', 
    width: 460, 
    minHeight: 80, 
    position: ['center',130], 
    open: function() { 
     $.ajax({url: '/stuff/'}) 
    }, 
    close: function() { 
     $('#dialog-content').html('<div class="notification"><h4>Loading...</h4></div>'); 
    }  
}); 

$("#addlink").live("click",function(){ 
    dialogstuff2.dialog('open'); 
    return false; 
}); 

Avec la 2ème dialogue, il casse les deux dialogues. Ils s'ouvrent tous les deux mais ils ne répondent pas au JS qui est chargé lorsque la boîte de dialogue appelle le serveur Web. Si j'enlève le 2ème, le premier fonctionne bien. Mais lorsque les deux sont sur la page, lorsque je clique pour charger l'un ou l'autre, la boîte de dialogue reste immobile avec le texte de chargement par défaut "loading ..."

Vous avez déjà vu cela? merci

Answer 1

Une chose que je remarque dans votre code est à la fois les dialogues ont un div externe avec un id de dialog-content. Vous voudrez peut-être les différencier et voir ce qui se passe car le navigateur/jQuery ne l'aimera peut-être pas.

Answer 2

C'est là que le bon vieux génie logiciel classique est utile avec le JavaScript. Créez une méthode de création de boîte de dialogue qui utilise un identificateur unique interne pour créer les ensembles de boîtes de dialogue souhaités.

function dialogBuilder(url){ 
    var uuid = 0; 
    var name = 'dialog_' + uuid++; 
    var $elem = $('<div id="' + name + '"></div>') 
    .html('<div class="notification"><h4>Loading...</h4></div>') 
    .dialog({ 
    autoOpen: false, 
    dialogClass: 'dialog', 
    width: 460, 
    minHeight: 80, 
    position: ['center',130], 
    open: function() { 
     $.ajax({url: '/stuff/'}) 
    }, 
    close: function() { 
     $('#dialog-content').html('<div class="notification"><h4>Loading...</h4></div>'); 
    }  
    }); 
    return $elem; 
} 
var permissions = dialogBuilder('/stuff/'); 
var dialogstuff = dialogBuilder('/stuff/'); 

Vous avez l'idée, la prochaine étape évidente serait d'établir les noms en dehors pour que vous puissiez faire quelque chose comme ceci:

var dialogHandler = {}; 
function dialogBuilder(dname, url, anchor){ 
    var uuid = 0; 
    var name = 'dialog_' + dname; 
    if(dialogHandler[name]){ 
    var $elem = dialogHandler[name].dialog({open:function(){$.ajax(url)}}); 
    dialogHandler[name] = $elem; 
    }else{ 
    var $elem = $('<div id="' + name + '"></div>') 
    .html('<div class="notification"><h4>Loading...</h4></div>') 
    .dialog({ 
     autoOpen: false, 
     dialogClass: 'dialog', 
     width: 460, 
     minHeight: 80, 
     position: ['center',130], 
     open: function() { 
     $.ajax({url: '/stuff/'}) 
     }, 
     close: function() { 
     $('#dialog-content').html('<div class="notification"><h4>Loading...</h4></div>'); 
     }  
    }); 
    dialogHandler[name] = $elem; 
    } 
    $(anchor).live('click',function(){ 
    dialogHandler[name].dialog('open'); 
    return false; 
    }) 
} 

// to call this above code: 
dialogBuilder('dialogstuff2','/stuff/','#addlink'); 
dialogBuilder('permissions','/stuff/','.teammember-dialog'); 

écrit, mais pas testé.