Boîte de dialogue jQuery UI empilée

Question

J'ai une boîte de dialogue modale dans mon application qui fonctionne très bien. Je ne configuration et ouverte de la boîte de dialogue avec les fonctions suivantes

$(document).ready(function() { 
    $("#__gsl_DialogPanel").dialog({ 
     autoOpen: false, 
     resizable: false, 
     position: 'center', 
     stack: true, 
     height: 'auto', 
     width: 'auto', 
     modal: true 
    }); 
}); 

function loadDialog(action, id, title, onCloseHandler) { 
    $("#__gsl_DialogPanel").dialog("option", "title", title); 
    var url = action; 
    if (id != "") url = url + "/" + id; 
    $.ajax({ 
     type: "get", 
     dataType: "html", 
     url: url, 
     data: {}, 
     success: function(response) { 
      $("#__gsl_DialogPanel").html('').html(response).dialog('open'); 
     } 
    }); 
} 

Maintenant, j'ai l'obligation d'ouvrir une autre boîte de dialogue à partir d'un bouton qui est à l'intérieur de la boîte de dialogue précédente. J'ai créé un autre div (« __gsl_DialogPanel_2L ») et cloné la configuration et la fonction ouverte se référant à la nouvelle boîte de dialogue comme dans le code suivant

$("__gsl_DialogPanel_2L").dialog({ 
    autoOpen: false, 
    resizable: false, 
    position: 'center', 
    stack: true, 
    height: 'auto', 
    width: 'auto', 
    modal: true 
}); 

function loadDialog2L(action, id, title, onCloseHandler) { 
    $("#__gsl_DialogPanel_2L").dialog("option", "title", title); 
    var url = action; 
    if (id != "") url = url + "/" + id; 
    $.ajax({ 
     type: "get", 
     dataType: "html", 
     url: url, 
     data: {}, 
     success: function (response) { 
      $("#__gsl_DialogPanel_2L").html('').html(response).dialog('open'); 
     } 
    }); 
} 

Le problème est que la deuxième boîte de dialogue ne s'ouvre pas du tout. J'ai vérifié avec les outils de développement de Chrome et je peux voir que le div contient le bon HTML qui a été reçu de l'appel ajax mais a toujours "display: none" dans sa propriété de style.

Où est-ce que je fais mal?

Mise à jour:

Ce sont les DIV utilisés. Ils sont dans la page maître immédiatement après le tag BODY.

<!-- Generic Dialog Panel --> 
<div id="__gsl_DialogPanel" style="display:none" title=""></div> 
<!-- 2 Level Dialog Panel --> 
<div id="__gsl_DialogPanel_2L" style="display:none" title=""></div> 

2ème mise à jour:

J'ai créé un échantillon simplifié sur JSBin. Vous pouvez le trouver here. De l'aide?

Answer 1

J'ai pu obtenir votre exemple sur jsbin pour travailler en changeant le second id div (et les références) à "foo". Je soupçonne qu'il y a une sorte de collision de noms qui se produit - peut-être y a-t-il un nombre maximum de caractères significatifs sur le nom de la variable dans Javascript ou le div id? (Recherché brièvement et je n'arrive pas à trouver cela indiqué nulle part, cependant).