Comment utiliser le chargement AJAX avec les onglets Bootstrap?

Question

J'ai utilisé bootstrap-tabs.js et cela a parfaitement fonctionné.

Mais je n'ai pas trouvé d'informations sur la façon de charger du contenu via la demande AJAX.

Alors, comment utiliser le chargement AJAX avec bootstrap-tabs.js?

Answer 1

Dans Bootstrap 2.0 et versions ultérieures, vous devez vous lier à l'événement «show» à la place.

Voici un exemple HTML et 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
       });
    });
});
 

J'ai écrit un article à ce sujet ici: http://www.mightywebdeveloper.com/coding/bootstrap-2-tabs-jquery-ajax-load-content/

Answer 2

Vous pouvez écouter l'événement change et le contenu de chargement ajax dans le gestionnaire d'événements

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

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

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

MISE À JOUR: J'ai écrit un petit exemple, vous pouvez visiter http://1.upstatic.sinaapp.com/ et afficher le code source.

Answer 3

J'ai voulu charger entièrement dynamique des pages php dans les onglets grâce à Ajax. Par exemple, je voulais avoir des $_GET valeurs dans les liens, basé sur l'onglet qui il était - c'est utile si vos onglets sont dynamiques, basées sur les données de base de données par exemple. Ne pouvais pas trouver quelque chose qui a travaillé avec elle, mais j'ai réussi à écrire quelques jQuery qui fonctionne réellement et fait ce que je suis à la recherche pour. Je suis une complète jQuery noob, mais voici comment je l'ai fait.

1. J'ai créé un nouveau "data-toggle' option appelée tabajax (au lieu de simplement onglet), cela me permet de séparer ce qui est ajax et ce qui est du contenu statique.
2. J'ai créé un jQuery extrait de code qui s'exécute en fonction de ces données-bascule, il ne plaisante pas avec le code d'origine.

Je peux maintenant charger dire l'url.le php?valeur=x dans mon Bootstrap Onglets.

N'hésitez pas à utiliser si vous le souhaitez, le code est ci-dessous

jQuery code:

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

Donc, ici, vous pouvez voir que j'ai changé la façon de l'amorce charges chose, j'utilise le href de la dynamique ajaxlink puis ajouter une "data-target' valeur pour le lien à la place, qui devrait être votre cible div (onglet contenu).

Donc, à votre le contenu de l'onglet section, vous devez ensuite créer une div vide appelé val1 pour cet exemple.

Div vide (cible):

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

Espérons que cela est utile à quelqu'un :)

Answer 4

Je propose de mettre l' uri dans les éléments tab-pane , cela permet de profiter des fonctionnalités des frameworks web reverse url . Il permet également de dépendre exclusivement du balisage

 <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>
 

Et voici le 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();
});
 

Je charge l'onglet actif et ne charge un onglet que s'il n'est pas déjà chargé

Answer 5

Il y a une erreur dans votre code user1177811.

Ce doit être $('[data-toggle="tabajax"]') .

Il y a également place à amélioration. La méthode .load (), contrairement à $ .get (), nous permet de spécifier une partie du document distant à insérer. J'ai donc ajouté #content pour charger la div de contenu de la page distante.

$this.tab('show'); n'est désormais appelé que lorsque la réponse a réussi.

Voici le code

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