Twitter Bootstrap onglets de charge contenant du contenu via AJAX

Je suis en train de mettre en œuvre cet exemple pour Twitter Bootstrap onglets http://www.dba-resources.com/scripting-programming/ajax-tabs-in-bootstrap-2-1/ chargement de contenu via AJAX, mais j'ai besoin de charger le contenu d'un div conteneur, dans le même document, plutôt que de charger plusieurs documents. Le code que j'utilise est comme suit:

jQuery

$(function() {
    $("#MainTabs").tab();
    $("#MainTabs").bind("show", function(e) {    
        var contentID  = $(e.target).attr("data-target");
        var contentURL = $(e.target).attr("href");
        if (typeof(contentURL) != 'undefined')
            $(contentID).load(contentURL, function(){ $("#MainTabs").tab(); });
        else
            $(contentID).tab('show');
        });
    $('#MainTabs div[data-target="#tabone"]').tab("show");
});

HTML

<ul id="MainTabs" class="nav nav-tabs">
    <li><div data-target="#tabone" data-toggle="tab">tab One</div></li>
    <li><div data-target="#tabtwo" data-toggle="tab" href="/test.html">Tab Two</div></li>
    <li><div data-target="#tabthree" data-toggle="tab" href="/test2.html">Tab Three</div></li>
</ul>
<div class="tab-content">
    <div class="tab-pane" id="tabone">Content Tab One</div>
    <div class="tab-pane" id="tabtwo">Loading...</div>
    <div class="tab-pane" id="tabthree">Loading...</div>
</div>

Je vous remercie d'avance pour toute aide.

OriginalL'auteur Dano_D | 2013-02-06

  1. 6

    Que devrait être le comportement par défaut si vous venez de passer dans le id du conteneur à l' href.

    <li><div data-target="#tabone" data-toggle="tab" href="#loadedcontent">tab One</div></li>

....

<div id="loadedcontent">My content</div>

    Puisque vous avez un cas spécial où vous voulez charger un conteneur spécifique de la page par le biais d'un appel AJAX. Vous pouvez faire quelque chose comme cela.

    HTML

    <li><div id="specialTab" data-target="#tabone" data-toggle="tab" href="/ajax.html">tab one</div></li>

    JS

    $('#specialTab').click(function(e) {
    e.preventDefault();
    var containerId = '#content'; /** Specify which element container */
    var self = $(this);
    var url = self.attr('href');
    $(self.data('target'))
        .load(url +' '+ containerId, function(){
           self.tab('show');
        });
});
    Merci Denise. Il est nécessaire de charger un conteneur spécifique (div) à partir d'un fichier externe. Le comportement par défaut n'est pas ce dont j'ai besoin.
    Voir ma réponse mis à jour.
    Merci encore. Dans ce cas, quel serait le code pour tabtwo de charger encore un autre conteneur à l'intérieur /ajax.html? Dire #contenttwo. Chaque onglet serait de charger un conteneur différent de la même html externe
    Dans ce cas, vous pouvez faire la <div class="specialTab" data-container="#container" data-toggle="tab" href="/ajax.html"></div> et la data-container spécifier l'élément que vous souhaitez capturer. Il vous faudra alors remplacer la var containerId=self.data('container'); pour obtenir l'élément conteneur.

    OriginalL'auteur Dennis Rongo