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

**sipatsymasaka** · 09/12/2014, 13h14

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

Sélectionner tout - Visualiser dans une fenêtre à part

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&eacute;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&eacute;</a></li>
	</ul>
</div>
<div style='height:20px;'></div>  
<div>
	<?php echo $output; ?>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**sipatsymasaka** · 09/12/2014, 13h37

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="#"

**sipatsymasaka** · 09/12/2014, 14h11

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

**Bovino** · 09/12/2014, 14h16

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

Et au passage, simuler, c'est pas bien...

**sipatsymasaka** · 09/12/2014, 14h30

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

l'alert n'est quand même pas affiché

**Bovino** · 09/12/2014, 15h01

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

**sipatsymasaka** · 09/12/2014, 15h31

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.

**sipatsymasaka** · 11/12/2014, 13h45

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.

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

jQuery

Discussions similaires

Partager

Partager