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>
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");
});
});
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
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With