Загружать вкладки удаленно с помощью бутстрапа 3 с идентификатором

Question

Можно ли загружать вкладку удаленно с помощью загрузочного буфера 3? И если да, можно ли удаленно загружать только определенную часть сайта (через тег ID)? Если да, как это можно сделать с помощью загрузочных 3 вкладок? Я пробовал несколько методов, и они просто НЕ работают. Спасибо!

Вот что я получил до сих пор. Когда я щелкнул вкладку ajax, она просто загружается на новую страницу. Я хочу, чтобы он загружал определенный контент с этой страницы. В основном, что я пытаюсь сделать, это загрузить содержимое внутри #tabkarma с удаленной страницы, на текущую веб-страницу через вкладки. Но пока это не работает.

JS

<script type="text/javascript"> 
$('[data-toggle="tabajax"]').click(function(e) { 
    var $this = $(this), 
     loadurl = $this.attr('href'), 
     targ = $this.attr('data-target'); 

    $.get(loadurl, function(data) { 
     $(targ).html(data); 
    }); 

    $this.tab('show'); 
    return false; 
}); 
</script> 

HTML

<div role="tabpanel"> 

    <!-- Nav tabs --> 
    <ul class="nav nav-tabs text-center" role="tablist" id="myTabs"> 
    <li role="presentation" class="active"><a href="#about" role="tab" data-toggle="tab">About Me</a></li> 
    <li role="presentation"><a href="#content" role="tab" data-toggle="tab">Content</a></li> 
    <li role="presentation"><a href="#activity" role="tab" data-toggle="tab">Activity</a></li> 
    <li role="presentation"><a href="#followers" role="tab" data-toggle="tab">Followers</a></li> 
    <li role="presentation"><a href="/b/reputation.php?uid=4" data-target="#tabkarma" data-toggle="tabajax" id="tabkarma">Karma</a></li> 
    <li role="presentation"><a href="#achievements" role="tab" data-toggle="tab">Achievements</a></li> 
    </ul> 

    <!-- Tab panes --> 
    <div class="tab-content"> 
    <div role="tabpanel" class="tab-pane active" id="about">...</div> 
    <div role="tabpanel" class="tab-pane" id="content">...</div> 
    <div role="tabpanel" class="tab-pane" id="activity">...</div> 
    <div role="tabpanel" class="tab-pane" id="followers">...</div> 
    <div role="tabpanel" class="tab-pane" id="tabkarma">Loading</div> 
    <div role="tabpanel" class="tab-pane" id="achievements">...</div> 
    </div> 

</div> 

Answer 1

Прежде всего, удалите id="tabkarma" из-за того, что он противоречит фактической вкладке.

Теперь, если вы хотите загрузить определенную часть со страницы, вы должны использовать .load(). Из документов:

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

Так что сценарий будет выглядеть следующим образом:

$('[data-toggle="tabajax"]').click(function (e) { 
    var $this = $(this), 
     loadurl = $this.attr('href'), 
     targ = $this.attr('data-target'); 

    //Add the selector of the element you want to fetch from the external page to the url (with a blank space in between) 
    $(targ).load(loadurl + " #loadthis", function() { 
     $this.tab('show'); 
    }); 

    return false; 
}); 

Вот demo fiddle

Обратите внимание, что это будет сделать Ajax вызов каждый раз, когда нажата ссылка, вы можете добавить чек только для этого.

Answer 2

Как бы подойти это с помощью скрытых элементов DOM.

Например, в целевом сайте, есть что-то вдоль линии

<div id="tabkarma"></div> 

И в том, что это содержание вы хотите. Вы можете загрузить его с помощью AJAX JQuery, так:

$.ajax({ 
    type: "GET", 
    url: "http://targetsite.com/whatever", 
    data:{} 
}).done(function(msg){ 
    $("#hiddendiv").html(msg); 
}); 

Трюк с этим что #hiddendiv относится к некоторому DIV с стилизации похожи на display: none;. Это заставляет браузер создавать объекты уровня DOM для загруженного содержимого, но не отображать его. Тогда, это простой JQuery вызов для загрузки вашей целевой контент в вашу фактическую закладку:

$("#tabajax").html($("#tabkarma").html()); 

Который просто говорит: «принять все HTML-код внутри #tabkarma и поместить его в #tabajax».

Одно замечание: большинство серверов не поддерживают кросс происхождения AJAX запросов: иначе, если вы вызываете этот код из mycoolurl.com и кода ссылки на somethingcool.com, он будет заблокирован по умолчанию, но есть способы настройки вашего веба сервер, чтобы не блокировать это, или просто используя что-то вроде http://www.whateverorigin.org/.

Answer 3

Вы должны это сделать ...

HTML

<div role="tabpanel"> 
    <!-- Nav tabs --> 
    <ul class="nav nav-tabs" role="tablist"> 
     <li role="presentation" class="active"> <a href="#home" aria-controls="home" role="tab" data-toggle="tab" data-url="url-to-home"><!-- make sure you update the data-url for this page --> 
       Home 
      </a> 
     </li> 
     <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" data-url="url-to-profile"><!-- make sure you update the data-url for this page --> 
      Profile</a> 

     </li> 
    </ul> 
    <!-- Tab panes --> 
    <div class="tab-content"> 
     <div role="tabpanel" class="tab-pane active" id="home">home</div> 
     <div role="tabpanel" class="tab-pane" id="profile">profile</div> 
    </div> 
</div> 

JS

$('.nav 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 + " #tabkarma", function (result) { 
     pane.tab('show'); 
    }); 
});