Не удалось загрузить вкладки Bootstrap удаленно

Question

Привет, У меня возникают трудности с поиском загрузки содержимого в закладки начальной загрузки удаленно в моем проекте ASP.NET MVC. Я провел некоторое исследование и узнал об этом link.

Я попытался реализовать это для своего проекта, но у меня проблемы с загрузкой страниц. Я получаю два макета, перекрывая один ниже другого и отображая содержимое двух страниц за одно и то же время, даже до того, как я нажму ссылку.

Это мой код:

<div class="container-fluid"> 
<ul class="nav nav-tabs" id="myTabs"> 
<li class="active"><a href="#controller1" data-url="http://localhost:1234/controller1/viewname1">Tab1</a></li> 
<li><a href="#Controller2" data-url="http://localhost:1234/controller2/viewname2">Tab2</a></li> 

</ul> 

<div class="tab-content"> 
<div class="tab-pane active" id="controller1"></div> 
<div class="tab-pane" id="Controller2"></div> 
    </div> 
</div> 

И сценарий:

$(document).ready(function() 
    { 


    $('#myTabs a').click(function (e) { 
     e.preventDefault(); 

     var url = $(this).attr("data-url"); 
     var href = this.hash; 
     var pane = $(this); 

     // ajax load from data-url 
     $(href).load(url, function (result) { 
      pane.tab('show'); 
     }); 
    }); 

     // load first tab content 
    $('#controller1').load($('.active a').attr("data-url"), function (result) { 
     $('.active a').tab('show'); 
    }); 

Вот Что происходит, мой контроллер по умолчанию controller1. поэтому, когда я загружаю страницу, я получаю содержимое как от контроллера1, так и от контроллера2, который является view1 и view2. И еще одна вещь, которую я должен упомянуть здесь, я использую ту же самую страницу макета, что и Layout = Layoutname для view1 и view2.

Может ли кто-нибудь помочь мне в решении этой проблемы.

Answer 1

Измените обработчик щелчка к этому:

$('#myTabs a').click(function (e) { 
    e.preventDefault(); 

    var url = $(this).attr("data-url"); 
    var href = $(this).attr("href"); 
    var that = this; 

    // ajax load from data-url 
    $(href).load(url, function (result) { 
     $(that).tab('show'); 
    }); 
});