is it possible to stick jquery ui tabs inside of a jquery ui dialog

Question

i have a web page that i want to load dynamically (ajax) into a jquery ui dialog. the page has multiple jquery tabs and when i load this into the dialog each tab is showing up as a regular link and the tab widget is not shown. Is this a known issue? Is there any workaround to support having jquery ui tabs inside of a dialog.

Warhol

Are you running the tabs() code in the dialog open callback or as a script on the page being loaded (must be in the body element)? – Parkman

Answer 1

yes its possible. here is a simple example ...

JS Fiddle Example

Hudak

thanks for the example . . the only different i see with my example is that the tabs themselves are being populated dynamically but i am going to do some more testing – Warhol

Answer 2

You might want to add an open handler to retrieve your content and set up the tabs when you do so.

$(function() {
    $('#dialog').dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            'OK' : function() {
                        $(this).dialog('close');
                   },
            'Cancel': function() {
                        $(this).dialog('close');
                   }
        },
        open: function(event,ui) {
           $(ui.panel).find('div')
                      .load('http://www.example.com')
                      .find('.tabs')
                      .tabs();
        }
    });
    $('.dialog-button').click( function() {
        $('#dialog').dialog('open');
        return false;
    });
});

<div id="dialog"  title="Dialog" style="display: none;">
    <div class="dialog-content">
    </div>
</div>

Parkman