Simuler l'activation d'un tab dès le premier affichage

Version imprimable

Bonjour,

J'utilise php, codeigniter, jquery, bootstrap dans mon application.
Je veux juste simuler les tabs et non pas utiliser des tabs targets.
- Voici une part du code de ma vue, qui m'affiche en liens simples : Département, Poste et Indemnité.
- elle m'affiche le résultat attendu quand je clique sur l'un des liens, mais c'est cette affichage première (citée précédemment) que je veux corriger,
le javascript que j'ai ajouté en fin de page ne règle pas mon problème, au contraire ça détériore le résultat.
Code:

1 2 3 4 5 6 7 8 9 10 11 <div id='manav'> <ul class="nav nav-tabs" id="mytabs"> <li role="presentation" class="active"><a id="versdept" href='<?php echo site_url('new_parametre/departement')?>'>Département</a></li> <li role="presentation"><a href='<?php echo site_url('new_parametre/poste')?>'>Poste</a></li> <li role="presentation"><a href='<?php echo site_url('new_parametre/indemnite')?>'>Indemnité</a></li> </ul> </div> <div style='height:20px;'></div> <div> <?php echo $output; ?> </div>
Code:

1 2 3 4 $(document).ready(function(){ $('#mytabs').tab('show'); alert('ok'); });
Quelle correction je peux faire, ou quelle suggestion pouvez-vous donner pour améliorer?
merci.

09/12/2014, 13h37
sipatsymasaka

je sais que ce que je veux faire est un contraire au principe qu'un lien nav mène vers une tab, et que mon output de ce fait s'affichera toujours dans le tab par défaut parce qu'il n'en existe pas d'autres,
mais mon problème c'est où est-ce que je vais appeler par exemple la fonction département de mon controlleur new_parametre si je met href="#"

en passant, qui peut me dire pourquoi le javascript de cette page n'est pas interprété, je ne vois pas l'erreur.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
	<div id='manav'>
		<ul id="mytabs" class="nav nav-tabs" data-tabs="tabs">
		  <li class="active"><a id="verspage1" href="#red"  data-toggle="tab">Page principale</a></li>
		  <li role="presentation"><a id="versdept" href='<?php echo site_url('new_parametre/departement')?>'>D&eacute;partement</a></li>
		  <li role="presentation"><a id="versposte" href='<?php echo site_url('new_parametre/poste')?>'>Poste</a></li>
		  <li role="presentation"><a id="versind" href='<?php echo site_url('new_parametre/indemnite')?>'>Indemnit&eacute;</a></li>
		</ul>
	</div>
 
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red" style='height:20px;'>
    <div>
		<?php echo $output; ?>
    </div>
</div> 
</div>

Code:

1
2
3
4
jQuery(document).ready(function ($) {
	$('#mytabs').tab();
	alert('ok');
});

Mais si je clique sur l'un des trois lien après, l'alert est affiché, donc c'est le document qui n'est pas encore ready au premier affichage. mais pourquoi?

09/12/2014, 14h16
Bovino

J'imagine que le fait qu'il n'existe pas de méthode tab() dans jQuery y est pour beaucoup... :aie:

Et au passage, simuler, c'est pas bien...
09/12/2014, 14h30
sipatsymasaka

mais je vois ça dans plusieurs tuto, par exemple: https://gist.github.com/mnewt/4228037
et ensuite même si je commente la ligne

Code:

$('#mytabs').tab();

l'alert n'est quand même pas affiché
09/12/2014, 15h01
Bovino

Peut-être que tu as simplement "oublié" d'intégrer jQuery à ta page...
Quant au script que tu indiques, il utilise jQuery + Bootstrap.
09/12/2014, 15h31
sipatsymasaka

en effet, je ne réussi à loader les js et css qu'une fois le $output affiché,
or, au premier affichage, j'ai juste les trois liens
(l'appel des fichiers en question se fait juste dans la fonction qui affiche $output)
je dois abandonner pour le moment les tabs et exploiter les modals.
merci de ton précieux aide.
11/12/2014, 13h45
sipatsymasaka

c'est résolu mais malheureusement trop long à expliquer ici: bref, je part du chargement de deux vues, l'un qui charge les nav-tab et l'autre qui charge avec elle la libraire grocery crud.

autre soupape: les tabs ne s'activent pas s'il y a un ou des erreurs javacript dans votre code.