title: Stacked jQuery UI Dialogs
body: <p>I have one modal dialog in my application that works very nice. I do setup and open of the dialog with the following functions</p>
  
  <pre><code>$(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');
          }
      });
  }
  </code></pre>
  
  <p>Now I have the requirement to open another dialog from a button that's inside the previous dialog. I have created another div ("__gsl_DialogPanel_2L") and cloned the setup and open function referring to the new dialog as in the following code</p>
  
  <pre><code>$("__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');
          }
      });
  }
  </code></pre>
  
  <p>The problem is that the second dialog does not open at all. I have checked with Chrome Developer tools and I can see that the div contains the right HTML that has been received from the ajax call but still has "display: none" in its style property.</p>
  
  <p>Where I am doing wrong?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>These are the div's used. They are in the master page immediately after the BODY tag.</p>
  
  <pre><code>&lt;!-- Generic Dialog Panel  --&gt;
  &lt;div id="__gsl_DialogPanel" style="display:none" title=""&gt;&lt;/div&gt;
  &lt;!-- 2 Level Dialog Panel  --&gt;
  &lt;div id="__gsl_DialogPanel_2L" style="display:none" title=""&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>2nd Update</strong>:</p>
  
  <p>I have created a simplified sample on <a href="http://jsbin.com" rel="nofollow">JSBin</a>. You can find it <a href="http://jsbin.com/eduyo4" rel="nofollow">here</a>. Any help?</p>