Tabs Control Inside Dialog Control

Question

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:

The HTML structure is as follows:

<div id="tabs-{index}">
<ul>
<li><a href="#some-id-{index}">title1</a></li>
<li><a href="#another-id-{index}">title2</a></li>
</ul>

<div id="some-id-{index}>content</div>
<div id="another-id-{index}">content</div>
</div>

And here's my jQuery 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 > 0) {
                var index = content.data('index');
                var selector = '#read-more-tabs-' + index;
                $(selector).tabs();
            }
        }
    });

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.

UPDATE:

It does not work as in the call to $(selector).tabs() does not do what it is supposed to do. So what actually gets rendered is an un-ordered list rather than a tabs control.

Any thoughts why this is not working?

Answer 1

The complete solution for displaying tabs widget inside dialogue widget using jQuery UI as below:

HTML:

    <div id="dialgue" title="Tabs with Dialogue">
    <div id="tabs">
      <ul>
        <li>
        <a href="#tabs-1">
          Tab-1
        </a>
      </li>
      <li>
        <a href="#tabs-2">
          Tab-2
        </a>
      </li>
      <li>
        <a href="#tabs-3">
          Tab-3
        </a>
      </li>
    </ul>
    <div id="tabs-1">
      <p>
        Contents of Tab-1 has been displayed here...!
      </p>
    </div>
    <div id="tabs-2">
      <p>
        Contents of Tab-2 has been displayed here...!
      </p>
    </div>
    <div id="tabs-3">
      <p>
        Contents of Tab-3 has been displayed here...!
      </p>
    </div>
     </div>
   </div>
<input type="button" id="btndialogue" value="Show Dialogue with Tabs" />

CSS:

.ui-widget{
  font-size:14px !important;
}
.ui-dialog-title{
  font-weight:bold;
}
.ui-tabs .ui-tabs-nav{
  font-size:13px;
}
.ui-tabs-panel{
  font-size:12px;
}

JQuery:

$(function() {
    $("#dialgue").dialog({
        autoOpen: false,
        modal: false,
        draggable: false,
        title: 'Tabs with Dialogue',
        show: 'slide',
        hide: 'slide',
        width: '500',
        open: function(event, ui) {
            $("#tabs").tabs();
        }
    });
    $("#btndialogue").click(function() {
        $("#dialgue").dialog('open');
    });
});

Note: Before test/run above script, need to include latest jquery.js, jquery-ui.js and jquery-ui.css files.

I have created a bin with the solution on http://codebins.com/codes/home/4ldqpbx