Как использовать загрузку AJAX с вкладками Bootstrap?

Ответ 1

Вы можете прослушать change событие и загружать содержимое ajax в обработчике событий

$('.tabs').bind('change', function (e) {
    var now_tab = e.target // activated tab

    // get the div id
    var divid = $(now_tab).attr('href').substr(1);

    $.getJSON('xxx.php').success(function(data){
        $("#"+divid).text(data.msg);
    });
})

Ответ 2

В Bootstrap 2.0 и выше вы должны привязываться к событию 'show'.

Вот пример HTML и JavaScript:

<div class="tabbable">
    <ul class="nav nav-tabs" id="myTabs">    
        <li><a href="#home"  class="active" data-toggle="tab">Home</a></li>
        <li><a href="#foo" data-toggle="tab">Foo</a></li>
        <li><a href="#bar" data-toggle="tab">Bar</li>
    </ul>
    <div>
        <div class="tab-pane active" id="home"></div>
        <div class="tab-pane" id="foo"></div>
        <div class="tab-pane" id="bar"></div>
    </div>
</div>

JavaScript:

$(function() {
    var baseURL = 'http://yourdomain.com/ajax/';
    //load content for first tab and initialize
    $('#myads').load(baseURL+'home', function() {
        $('#myTab').tab(); //initialize tabs
    });    
    $('#myTab').bind('show', function(e) {    
       var pattern=/#.+/gi //use regex to get anchor(==selector)
       var contentID = e.target.toString().match(pattern)[0]; //get anchor         
       //load content for selected tab
       $(contentID).load(baseURL+contentID.replace('#',''), function(){
            $('#myTab').tab(); //reinitialize tabs
       });
    });
});

Я написал сообщение об этом здесь: http://www.mightywebdeveloper.com/coding/bootstrap-2-tabs-jquery-ajax-load-content/

Ответ 3

Я хотел загрузить полностью динамические php-страницы в вкладки через Ajax. Например, я хотел иметь значения $_GET в ссылках, основываясь на том, какая вкладка была - это полезно, если ваши вкладки динамические, например, на основе данных базы данных. Не удалось найти что-то, что сработало с ним, но мне удалось написать некоторый jQuery, который действительно работает и делает то, что я ищу. Я полный jQuery noob, но здесь, как я это сделал.

• Я создал новую опцию 'data-toggle', называемую tabajax (вместо простой вкладки), это позволяет мне отделить то, что ajax и какой статический контент.
• Я создал фрагмент jQuery, который работает на основе этого переключателя данных, он не вписывается в исходный код.

Теперь я могу загрузить значение url.php? value = x в мои вкладки Bootstrap.

Не стесняйтесь использовать его, если хотите, код ниже

Код jQuery:

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

    });
    $(this).tab('show')
});

HTML:

<li><a href="tabs/loadme.php?value=1" data-target='#val1' data-toggle="tabajax">Val 1</a></li>

Итак, вы можете видеть, что я изменил способ загрузки загрузочных загрузок, я использую href для динамического ajaxlink, а затем вместо этого добавляю значение "цель данных" в ссылку, это должен быть ваш целевой div (вкладка -компонент).

Итак, в разделе содержимого вкладки вы должны создать пустой div, называемый val1 для этого примера.

Пустое поле (цель):

<div class='tab-pane' id='val1'><!-- Ajax content will be loaded here--></div>

Надеюсь, что это кому-то полезно:)

Ответ 4

Я предлагаю поместить uri в элементы tab-pane, он позволяет использовать веб-фреймворки для обратных ссылок. Это также позволяет зависеть исключительно от разметки

<ul class="nav nav-tabs" id="ajax_tabs">
  <li class="active"><a data-toggle="tab" href="#ajax_login">Login</a></li>
  <li><a data-toggle="tab" href="#ajax_registration">Registration</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="ajax_login"
    data-target="{% url common.views.ajax_login %}"></div>
  <div class="tab-pane" id="ajax_registration"
    data-target="{% url common.views.ajax_registration %}"></div>
</div>

И вот javascript

function show_tab(tab) {
    if (!tab.html()) {
        tab.load(tab.attr('data-target'));
    }
}

function init_tabs() {
    show_tab($('.tab-pane.active'));
    $('a[data-toggle="tab"]').on('show', function(e) {
        tab = $('#' + $(e.target).attr('href').substr(1));
        show_tab(tab);
    });
}

$(function () {
    init_tabs();
});

Я загружаю активную вкладку и загружаю вкладку только в том случае, если она еще не загружена

Ответ 5

В вашем коде user1177811 есть ошибка.

Он должен быть $('[data-toggle="tabajax"]').

Также есть место для улучшения. Метод .load(), в отличие от $.get(), позволяет нам указать часть удаленного документа, который будет вставлен. Поэтому я добавил #content для загрузки содержимого div удаленной страницы.

$this.tab('show'); теперь вызывается только тогда, когда ответ был успешным.

Вот код

 $('[data-toggle="tabajax"]').click(function(e) {
        e.preventDefault();
        $this = $(this);
        var loadurl = $(this).attr('href');
        var targ = $(this).attr('data-target');
        $(targ).load(loadurl+'?ajax=true #content', function(){
            $this.tab('show');
        });
    });

Ответ 6

Вот как я это делаю. Я использую атрибут data-href, который содержит URL-адрес, который я хочу загрузить на показ. Это не перезагрузит данные, которые уже загружены, если вы не установили $('#tab').data('loaded'); в 0 или не удалили его. Он также обрабатывает относительные и абсолютные URL-адреса, обнаруживая местоположение первой косой черты. Я не уверен в совместимости со всеми браузерами, но он работает в нашей ситуации и позволяет использовать функциональность, которую мы ищем.

JavaScript:

//Ajax tabs
$('.nav-tabs a[data-href][data-toggle="tab"]').on('show', function(e) {
  var $this = $(this);
  if ($this.data('loaded') != 1)
  {
    var firstSlash = $this.attr('data-href').indexOf('/');
    var url = '';
    if (firstSlash !== 0)
      url = window.location.href + '/' + $this.attr('data-href');
    else
      url = $this.attr('data-href');
    //Load the page

    $($this.attr('href')).load(url, function(data) {
      $this.data('loaded', 1);
    });
  }
});

HTML:

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#js-tab1" data-href="tab1.php" data-toggle="tab">Tab 1</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="js-tab1">
      <p>
        This content isn't used, but instead replaced with contents of tab1.php.
      </p>
      <p>
        You can put a loader image in here if you want
      </p>
    </div>
  </div>
</div>

Ответ 7

Вот решение, которое я нашел - и изменено в соответствии с моими потребностями:

$("#tabletabs").tab(); // initialize tabs
$("#tabletabs").bind("show", function(e) { 
var contentID = $(e.target).attr("data-target");
var contentURL = $(e.target).attr("href");
if (typeof(contentURL) != 'undefined') { // Check if URL exists
$(contentID).load(contentURL, function(){
$("#tabletabs").tab(); // reinitialize tabs
});
} else {
$(contentID).tab('show');
}
});
$('#tabletabs a:first').tab("show"); // Load and display content for first tab
});

Ответ 8

Вот пример Ajax вкладки Bootstrap, вы можете использовать его...

<ul class="nav nav-tabs tabs-up" id="friends">
      <li><a href="/gh/gist/response.html/3843293/" data-target="#contacts" class="media_node active span" id="contacts_tab" data-toggle="tabajax" rel="tooltip"> Contacts </a></li>
      <li><a href="/gh/gist/response.html/3843301/" data-target="#friends_list" class="media_node span" id="friends_list_tab" data-toggle="tabajax" rel="tooltip"> Friends list</a></li>
      <li><a href="/gh/gist/response.html/3843306/" data-target="#awaiting_request" class="media_node span" id="awaiting_request_tab" data-toggle="tabajax" rel="tooltip">Awaiting request</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane active" id="contacts">
</div>
      <div class="tab-pane" id="friends_list">

      </div>
      <div class="tab-pane  urlbox span8" id="awaiting_request">

      </div>
    </div>

и вот вызов AJAX

$('[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;
});

Ответ 9

Это пример MVC с использованием Razor. Он будет взаимодействовать с двумя частичными представлениями: _SearchTab.cshtml и _SubmissionTab.cshtml

Обратите внимание, что я называю идентификатор вкладок такими же, как и частичные.

Разметка:

<!-- Nav tabs -->
<ul id="tabstrip" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#_SubmissionTab" role="tab" data-toggle="tab">Submission</a></li>
    <li><a href="#_SearchTab" role="tab" data-toggle="tab">Search</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane fade in active" id="_SubmissionTab">@Html.Partial("_SubmissionTab")</div>
    <div class="tab-pane fade" id="_SearchTab"></div>
</div>

@Html.Partial запросит страницу на активной вкладке при загрузке страницы

Script:

<script>
    $('#tabstrip a').click(function (e) {
        e.preventDefault()
        var tabID = $(this).attr("href").substr(1);
        $("#" + tabID).load("/@ViewContext.RouteData.Values["controller"]/" + tabID)
        $(this).tab('show')
    })
</script>

Функция load будет выполнять запрос ajax при нажатии каждой вкладки. Что касается запрошенного пути, вы увидите вызов @ViewContext.RouteData.Values["controller"]. Он просто получает контроллер текущего представления, предполагая, что частичные представления находятся там.

Контроллер:

    public ActionResult _SubmissionTab()
    {
        return PartialView();
    }

    public ActionResult _SearchTab()
    {
        return PartialView();
    }

Контроллер необходим для ретрансляции запроса load на соответствующий частичный вид.

Ответ 10

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

Совет: на вкладке href просто введите место назначения. Добавьте это в нижний колонтитул:

$("#templates_tabs").tabs({
    beforeLoad: function( event, ui ) {
      if (ui.tab.data("loaded")) {
          event.preventDefault();

          return;
      }


      ui.ajaxSettings.cache = false,
      ui.jqXHR.success(function() {

          ui.tab.data( "loaded", true );
      }),
      ui.jqXHR.error(function () {


          ui.panel.html(
          "Not possible to load. Are you connected?");
      });
    }
  });