Les onglets Twitter bootstrap et les événements javascript

Question

J'utilise twitter bootstrap pour un projet - en particulier ses fonctions d'onglet ( http://twitter.github.com/bootstrap/javascript.html#tabs )

J'ai maintenant cette liste d'onglets et lorsque j'appuie sur l'onglet, le contenu de chaque onglet individuel s'affiche. Cependant, ce contenu est préchargé dans la page (le code html pour le contenu de tous les onglets est déjà là, vous changez seulement la visibilité en appuyant sur les onglets).

Cependant, je veux charger dynamiquement le contenu uniquement lorsqu'on appuie sur un certain onglet, de sorte que l'on obtienne les données les plus récentes au lieu de celles obtenues lors du chargement de la page entière.

J'ai l'intention d'utiliser jQuery pour cela. Cependant, comment puis-je faire en sorte que, lorsqu'on appuie sur un onglet, une certaine fonction jquery soit appelée ?

J'ai essayé d'afficher une alerte lorsqu'un onglet a été cliqué (si cela fonctionne, une fonction jQuery le fera aussi), mais même cela ne fonctionne pas :

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-tabs.js"></script>
<script type="text/javascript">
$(function() {
    $('.tabs').bind('click', function (e) {
        e.target(window.alert("hello"))
    });
});
</script>

Et mon html :

<ul class="tabs" data-tabs="tabs">
  <li class="active"><a href="#tab1">tab 1</a></li>
  <li><a href="#tab2">tab 2</li>
</ul>

<div id="my-tab-content" class="tab-content">
  <div class="tab-pane" id="tab1">
      <h1>Tab1</h1>
      <p>orange orange orange orange orange</p>
  </div>
  <div class="tab-pane" id="tab2">
     <h1>Tab2</h1>
     <p>blue blue blue blue blue</p>
  </div>
</div>

Une idée sur la façon de faire fonctionner ce système ?

voir ceci pour le fonctionnement des onglets twitter bootstrap : ( http://twitter.github.com/bootstrap/javascript.html#tabs ) et le fichier js qu'il utilise : http://twitter.github.com/bootstrap/1.4.0/bootstrap-tabs.js

Answer 1

Avec la version 2 de Twitter Bootstrap, le moyen documenté de s'abonner aux événements de changement d'onglet est

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

La dernière documentation sur les événements des onglets de Twitter Bootstrap se trouve à l'adresse suivante http://getbootstrap.com/javascript/#tabs

Answer 2

Si vous utilisez la version 2.3.2 et que cela ne fonctionne pas, essayez de l'utiliser :

$(document).on("shown", 'a[data-toggle="tab"]', function (e) {
     console.log('showing tab ' + e.target); // Active Tab
     console.log('showing tab ' + e.relatedTarget); // Previous Tab
});

2.3.2 Utilisation des onglets : http://getbootstrap.com/2.3.2/javascript.html#tabs

Si vous jouez avec la version 3 (actuellement RC2), la documentation montre que

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
     console.log('showing tab ' + e.target); // Active Tab
     console.log('showing tab ' + e.relatedTarget); // Previous Tab
 })

Utilisation des onglets RC2 : http://getbootstrap.com/javascript/#tabs-usage

Answer 3

La liaison semble s'exécuter avant que le DOM ne soit prêt. De plus, votre sélecteur semble être cassé et vous ne pouvez lier les changements que sur les éléments sélectionnés. Vous devez contourner le problème en cliquant et en implémentant une certaine logique. Essayez

$(function() {
    $('.tabs').bind('click', function (e) {
        e.target(window.alert("hello"))
    });
});

UPDATE

Après avoir consulté la documentation, il semble que votre code ne manquait que la partie DOM ready, le reste n'était pas vraiment un bug, ce qui signifie que selon la documentation, ce qui suit devrait fonctionner :

$(function() {
    $('.tabs').bind('change', function (e) {
        // e.target is the new active tab according to docs
        // so save the reference in case it's needed later on
        window.activeTab = e.target;
        // display the alert
        alert("hello");
        // Load data etc
    });
});

Ce qui a causé la confusion est que le plugin remplace le sélecteur par défaut, ce qui fait que #.tabs valide et ajoute également un événement de changement à l'élément tab. Allez savoir pourquoi ils ont décidé que cette syntaxe était une excellente idée.

Quoi qu'il en soit, vous pouvez essayer le deuxième exemple et commenter si l'alerte est déclenchée avant ou après le changement de tabulation.

EDIT : correction de l'exception jquery causée par #.tabs sélecteur

Answer 4

Et si on utilisait le clic ? Comme ceci :

$('#.tabs').click(function (e) {
  e.target(window.alert("hello"))
})

Answer 5

Vous avez une erreur dans votre syntaxe relative au sélecteur :

$('#.tabs') // should be ...
$('.tabs');

La liste non ordonnée a la classe appelés "tabulations" dans votre HTML, alors qu'à l'origine, vous essayiez de sélectionner un élément avec la fonction id '.tabs'.

Et vous devrez également tenir compte de la suggestion de Manticore. Vous ne pouvez utiliser "change" que sur les éléments de formulaire.

$(document).ready(function() {
    $('.tabs').click(function(e) {
        e.preventDefault();
        alert('tab clicked!');
    });
});