Bootstrap Tabs does not work correctly inside jQuery-UI dialog window

Question

I am trying to create an MDI like UI for my application. To achieve this, I am using jQuery UI library's dialog .

I have the following helper function to dynamically create a dialog window on the fly:

function createDialog(title, content, options) {
    var defaults = {
        minWidth: 600,
        minHeight: 400,
        width: 600,
        height: 400,
        position: { my: "left top", at: "left top"}
    };
    return $("<div class='dialog' title='" + title + "'>" + content + "</div>")
        .dialog($.extend({}, defaults, options));
}

I create dialog using the above function via the response from my ajax server like this:

function showOrder(order_id)
{
    // Load order info
    $.getJSON('/full_orders/ajaxInfo/'+ order_id)
        .done(function(response) {
            if (!response.isError) {
                createDialog('Order Summary', response.data);
            } else {
                handleError(null, null, response.errorMessage);
            }
        })
        .fail(handleError);
}

So, where ever I have orders on my app, I'd like to be able to bring up the summary details inside a dialog window. The contents of response.data comes from my ajax server, which typically looks like this:

<div>

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#fo_info" aria-controls="fo_info" role="tab" data-toggle="tab">Info</a></li>
        <li role="presentation"><a href="#fo_lines" aria-controls="fo_lines" role="tab" data-toggle="tab">Lines</a></li>
        <li role="presentation"><a href="#fo_customer" aria-controls="fo_customer" role="tab" data-toggle="tab">Customer</a></li>
        <li role="presentation"><a href="#fo_delivery_address" aria-controls="fo_delivery_address" role="tab" data-toggle="tab">Delivery Address</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="fo_info">
            <p>order info here</p>
        </div>
        <div role="tabpanel" class="tab-pane" id="fo_lines">
            <p>order lines here</p>
        </div>
        <div role="tabpanel" class="tab-pane" id="fo_customer">
            <p>customer info here</p>
        </div>
        <div role="tabpanel" class="tab-pane" id="fo_delivery_address">
            <p>delivery address</p>
        </div>
    </div>

</div>

When the whole thing runs, I am able to click on an order, which fires the showOrder() function and it creates a dialog window dynamically and loads content from ajax server, which contains bootstrap tabs and I am able to switch between all the tabs.

If I were to close the dialog and click the link again, the tabs stop working. I am no longer able to switch between the tabs. If I refresh the page and click on the order again, it works. So, it only appears to work once.

Any idea why this is?

Answer 1

Okay, I have figured out why this issue is occurring.

When you closed the dialog, it simply hide the dialog with "display: none". The DOM element remained on the page and was stacking up, each time I opened a dialog.

The way to solve this is by destroying/removing the dialog via the on close event handler.

So, I have updated my createDialog function like this and it has solved my problem:

function createDialog(title, content, options) {
    var defaults = {
        minWidth: 600,
        minHeight: 400,
        width: 600,
        height: 400,
        position: { my: 'left top', at: 'left top' },
        close: function()
        {
            $(this).dialog('destroy').remove();
        }
    };
    return $("<div class='dialog' title='" + title + "'>" + content + "</div>")
        .dialog($.extend({}, defaults, options));
}