Bootstrap tabs are not working via AJAX in a modal

Question

It working fine without modal and ajax. But when I load tabbed panel in modal using ajax it does not select Tab Panes.

<!-- Nav tabs -->
<ul class="nav nav-tabs tabs-left">
    <li class="active tab-selection"><a data-toggle="tab" href="#financial">Financial</a></li>
    <li class="tab-selection"><a data-toggle="tab" href="#marketing">Marketing</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="financial">Financial Tab</div>
  <div class="tab-pane" id="marketing">Marketing Tab</div>      
</div>

AJAX

$.ajax({
        url : url,
        type : "POST", 
        success:function(data){
            $(".modal-body").html(data);
        }
  });

My Modal

<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="previewForm" class="modal fade">
  <div class="modal-dialog" style="width: 675px">
    <div class="modal-content">
    <div class="modal-header">
        <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h3 id="myModalLabel" class="modal-title">Preview</h3>
    </div>
        <div class="modal-body">
        </div>  
    </div>
 </div>
</div>

Liqueur

You're trying to add some HTML to an element with class .modal-body, but there is no element with that class in your HTML code. – Punctuality

Code structure is fine and modal is also there in my code. Without modal it working fine also. – Liqueur

I can't see modal anywhere in the code you've posted, could you post some more? – Punctuality

I can suggest loading tab content by tab click – Cyme

@Punctuality I updated question with my modal code – Liqueur

Answer 1

I found alternative solution to show tabbed-panel of associated nav-tab like following.

$(document).ready(function(){
    $(document).on("click",".modal-body li a",function()
    {
        tab = $(this).attr("href");
        $(".modal-body .tab-content div").each(function(){
            $(this).removeClass("active");
        });
        $(".modal-body .tab-content "+tab).addClass("active");
    });
});

Liqueur

Answer 2

Tab with data-attribute is execute on document load. You're calling it by ajax, so just init the tab component on success.

Here is an exemple (not with ajax, but with button click) :

Bootply : http://www.bootply.com/sNQH8hGFY9

Your code :

 $.ajax({
            url : url,
            type : "POST", 
            success:function(data){
                $(".modal-body").html(data);
                $('.modal-body .nav').tab();  //  <--- Look Here
            }
      });

Angeli

Thanks for your co-operate but Nav-tab is work but it associated tabbed-panel not working – Liqueur

Answer 3

Also make sure the "tab's" id are unique to the page.

Minoru