title: Tabs Control Inside Dialog Control
body: <p>I'm trying to stick a tabs jQuery UI widget inside the dialog widget, but it is not working for me. I have a bunch of data being retrieved from the database and is being rendered on the screen. When a user clicks on a (+) button, a dialog should open with its contents being tabbed. For some reason this is not working. Here's my code:</p>
  
  <p>The HTML structure is as follows:</p>
  
  <pre><code>&lt;div id="tabs-{index}"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#some-id-{index}"&gt;title1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#another-id-{index}"&gt;title2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="some-id-{index}&gt;content&lt;/div&gt;
  &lt;div id="another-id-{index}"&gt;content&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's my jQuery code:</p>
  
  <pre><code>    $('#disease-read-more-dialog').dialog({
          dialogClass: 'disease-read-more',
          autoOpen: false,
          modal: false,
          draggable: false,
          width: '500px',
          open: function () {
              $('#ui-dialog-title-disease-read-more-dialog').html($('#disease-read-more-dialog').attr('title'));
              var content = $('#disease-read-more-dialog').find('.hidden-disease-info').first();
              if (content.length &gt; 0) {
                  var index = content.data('index');
                  var selector = '#read-more-tabs-' + index;
                  $(selector).tabs();
              }
          }
      });
  </code></pre>
  
  <p>Note that the index is simply used because I've output all the data on screen on page load rather than doing an AJAX request (because the amount of data is relatively small), and then when the user clicks on the (+) I load the HTML content into the dialog. Hence the index is used to prevent messing up the tag ID's.</p>
  
  <p><strong>UPDATE:</strong> </p>
  
  <p>It does not work as in the call to <code>$(selector).tabs()</code> does not do what it is supposed to do. So what actually gets rendered is an un-ordered list rather than a tabs control.</p>
  
  <p>Any thoughts why this is not working?</p>