Discussion :

[clavier12AZQSWX]

bonjour,

Je travaille dans un framework propriétaire qui affiche des données dans un ensemble d'onglets (multi-page intercalaire).

Au retour d'un enregistrement, je souhaite réactiver (afficher) l'onglet sur lequel l'utilisateur avait cliqué c-a-d simulaire un click de souris sur l'onglet

L'onglet n'a pas de ID mais une class.
En googlant le code de la structure du multipage, il semblerait que ce soit un framework Boostrap4 mais la doc n'est plus disponible, ya que la 5 :

https://getbootstrap.com/docs/5.0/components/navs-tabs/

ça dit que si on veut ractiver un onglet, on doit faire :

Code javascript :

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

1
2
var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

Si j'adapte cette doc v5 à mon code (en v4) qui ressemble à ça :

Code html :

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

1
2
3
4
5
6
	<!-- multi-page -->
<div class="ew-nav-tabs" id="personnes_edit"><!-- multi-page tabs -->
	<ul class="nav nav-tabs">
		<li class="nav-item"><a class="nav-link show" href="#tab_personnes1" data-toggle="tab">Page1</a></li>
<li class="nav-item"><a class="nav-link show" href="#tab_personnes2" data-toggle="tab">Page2</a></li>
..etc.

on voit que chaque onglet un line href, donc l'idée est d'envoyer un click dessus je suppose pour afficher l'onglet...


Je me disais que ceci (basé sur le doc v5) aurait dû fonctionner si je voulais forcer la page2 :

Code javascript :

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

1
2
var triggerEl = document.querySelector('a[href="#tab_personnes2"]');
bootstrap.Tab.getInstance(triggerEl).show(); // Select tab by name

Mais non, ça bug !
j'ai une erreur dans la console :

Uncaught TypeError: bootstrap.Tab.getInstance is not a function

Voyez-vous ce que j'ai manqué ?
Sinon peut-être y-a-t-il un moyen plus rudimentaire d'envoyer un clic de souris sur ce lien href ?

ps : au passage j'ai tenté de rafficher la doc v4 en changeant l'url mais j'ai une 404... elle n'est plus en ligne officiellement.
https://getbootstrap.com/docs/4.0/components/navs-tabs/

[clavier12AZQSWX]

j'ai résolu mon souci par un autre moyen.

déjà j'ai retrouvé la doc v4 :
https://getbootstrap.com/docs/4.6/components/navs/

elle montre une autre version de code qui devrait marcher :

Code javascript :

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

$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name

que j'ai adapté :

Code javascript :

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

$('a[href="#tab_personnes2"]').tab('show');

Mais ça ne fonctionne toujours pas....

Par hasard j'ai fouillé et suis tombé sur un code qui envoie un click sur un bouton et ... miracle, ça fonctionne aussi pour envoyer un click sur un onglet ,
je le mets ci-dessous et laisse le sujet ouvert (pas résolu nativement ) si ça peut aider :

Code javascript :

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

$('a[href="#tab_personnes2"]').trigger("click");

Sinon le modo peut décider de fermer le sujet en résolu.