[Jquery - Tabs] Comment actualiser l'onglet jquery actif a partir d'un lien externe aux tabs ?

**bastien59960** · 21/07/2015, 17h00

Bonjour,

Est-ce que quelqu'un pourrais me donner une petite idée de comment faire pour actualiser l'onglet actif en lui envoyant une variable avec un bouton externe aux onglets.
Illustration :

Mes boutons externes ont le code suivant :

Code :

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

<a href="javascript:doSomething('55847affe1f985.76713544');">0090003</a>

qui me lance la fonction dosomething sans rafraichir la page :

Code :

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

1
2
3
function doSomething(codigo) {
alert(codigo);
}

et voici le code de mes tabs :

Code :

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
18
19
20
21
22
23
24
25
$(document).ready(function() {
    $("#page_tabs li a").click(function() {
 
        $("#tabs-container").empty().append("<div id='loading'><img src='images/loading.gif' alt='Loading' /></div>");
        $("#page_tabs li a").removeClass('current');
        $(this).addClass('current');
 
        $.ajax({ 
        	url: this.href, 
        	type: 'POST', 
        	data: ('codigo=XXX,&famille=XXX'),
        	success: function(html) 
        	{
        		$("#tabs-container").empty().append(html);
        	}
                });
    return false;
    });
 
    $("#tabs-container").empty().append("<div id='loading'><img src='images/loading.gif' alt='Loading' /></div>");
    $.ajax({ url: 'tab1.php', type: 'POST', data: 'codigo=XXX, famille=AZERTY', success: function(html) {
            $("#tabs-container").empty().append(html);
    }
    });
});

Code :

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

1
2
3
4
5
6
7
8
9
10
<div id="page_tabs">
    <ul  class="mytabs" id="tabs">
            <li class="current"><a href="tab1.php">Tab 1</a></li>
            <li><a href="tab2.php">Tab 2</a></li>
            <li><a href="tab3.php">Tab 3</a></li>
    </ul>
 
<div class="mytabs-container" id="tabs-container">
Loading. Please Wait...
</div>

Je ne sais pas quoi mettre dans "dosomething(mavariable)" pour rafraichir l'onglet actif en lui envoyant des nouvelles variables.
Si quelqu'un peut m'aiguiller un petit peu ça serait sympa.

Merci d'avance

Sébastien

**bastien59960** · 21/07/2015, 21h29

Ici : http://jsfiddle.net/adamculpepper/WXEme/

Il y a quelque chose qui ressemble, mais ça met juste le focus sur le tabs choisis par le survol.
Moi je cherche a transmettre via un lien externe plusieurs variables à l'onglet actif.

Dure dure.

Sébastien

**danielhagnoul** · 21/07/2015, 23h37

Message #1 : code étrange, rien à voir avec du code jQuery UI Tabs.

Exemple avec du contenu AJAX : http://jqueryui.com/tabs/#ajax

**bastien59960** · 22/07/2015, 01h56

Oui Daniel code étrange le seul que j'ai trouvé qui fonctionne pour passer les variables en POST, je réessaierai demain avec le code de la doc jquery, pour voir si j'arrive au même résultat et ensuite je verrais pour mes liens externes.

**danielhagnoul** · 22/07/2015, 04h18

Je crois avoir compris le problème. Voici le code d'une proposition de solution à tester :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
<ul id="tabs">
    <li class="current">
        <a href="tab1.php" data-codigo="1000" data-famille="3500">Tab 1</a>
    </li>
    <li>
        <a href="tab2.php" data-codigo="2000" data-famille="7000">Tab 2</a>
    </li>
    <li>
        <a href="tab3.php" data-codigo="3000" data-famille="10500">Tab 3</a>
    </li>
</ul>

Code :

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
18
19
20
21
$( function(){ // forme abrégée de $(document).ready(function(){
 
    var postData = {};
 
    $( "#tabs" ).tabs({
        "select" : function( event, ui ){
            postData = {
                "codigo" : $( ui.tab ).data( "codigo" ), // pour avoir un nombre au lieu d'un texte : parseInt( ..., 10 )
                "famille" : $( ui.tab ).data( "famille" )
            };
        },
        "ajaxOptions" : {
            "type" : "POST",
            "data" : postData,
            "error" : function( xhr, status, index, anchor ){
                $( anchor.hash ).html( "Oops !" );
            }
        }
    });
 
});

Si les valeurs ne sont pas fixes, mais calculées :

Code :

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

1
2
3
4
5
var m = $( ... ).data( "codigo" );
 
m = "quelquechose";
 
$( ... ).data( "codigo", m );

**bastien59960** · 22/07/2015, 17h29

Merci beaucoup Daniel pour les explications surtout les commentaire genre "// forme abrégée de $(document).ready(function(){" ça m'aide beaucoup a comprendre pourquoi chaque exemple que je trouve ne ressemble jamais aux autres exemples...
Merci pour l'astuce pour convertir en int, mais mes variables sont alphanumérique je converti en int sur le serveur avec PHP par la suite s'il le faut.

J'ai essayer ta proposition mais ça ne fonctionne pas chez moi :

Voici la version de Jquery que je charge :

Code :

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

<script type="text/javascript" src="./jquery-1.3.2.min.js"></script>

Le code que tu m'as rédigé :

Code :

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
18
19
20
21
22
23
<script type="text/javascript">
$( function(){ // forme abrégée de $(document).ready(function(){
 
    var postData = {};
 
    $( "#page_tabs" ).tabs({
        "select" : function( event, ui ){
            postData = {
                "codigo" : $( ui.tab ).data( "codigo" ), // pour avoir un nombre au lieu d'un texte : parseInt( ..., 10 )
                "famille" : $( ui.tab ).data( "famille" )
            };
        },
        "ajaxOptions" : {
            "type" : "POST",
            "data" : postData,
            "error" : function( xhr, status, index, anchor ){
                $( anchor.hash ).html( "Oops !" );
            }
        }
    });
 
});
</script>

Et le html :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div id="page_tabs">
    <ul  class="mytabs" id="tabs">
    <li class="current"> <a href="tab1.php" data-codigo="A1000" data-famille="D3500">  Tab 1 </a> </li>
    <li>                 <a href="tab2.php" data-codigo="B2000" data-famille="E7000">  Tab 2 </a> </li>
    <li>		 <a href="tab3.php" data-codigo="C3000" data-famille="F10500"> Tab 3 </a></li>
    </ul>
 
<div class="mytabs-container" id="tabs-1">
Loading. Please Wait...
</div>
</DIV>

Dans la console j'avais : "TypeError: $(...).tabs is not a function"

Que j'ai résolu en mettant :

Code :

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

1
2
3
 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Au lieu de

Code :

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

<script type="text/javascript" src="./jquery-1.3.2.min.js"></script>

Dans jquery-1.3.2.min.js il n'y a pas le jquery-ui.js d'office ? que me conseillez-vous histoire de développez mon site avec la dernière version disponible ?

Problème ça ne fonctionne toujours pas : je ne vois pas dans le code à quel endroit je doit préciser l'ID du <DIV> qui me sert de container pour mes tabs.

Dans l'exemple de la doc non plus je ne le vois pas :

Code :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tabs - Content via Ajax</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.fail(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });
      }
    });
  });
  </script>
</head>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="ajax/content1.html">Tab 1</a></li>
    <li><a href="ajax/content2.html">Tab 2</a></li>
    <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
    <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
</div>
 
 
</body>
</html>

Le container de la doc s'appelle "tabs-1" et je ne vois pas dans le code ci dessus (de la doc) ou est-ce qu'on le renseigne, étrange...

Merci infiniment pour ton aide. Je suis désolé pour mes questions de newbi, quand j'aurais enfin compris comment ça marche ça ira mieux ^_^,,

**bastien59960** · 23/07/2015, 21h40

Bon je continu avec mon code batard, qui n'utilise donc pas a priori les tabs de jquery, mais juste une mise en forme CSS avec une chouche d'ajax via jquery puisque avec le script spécial pour réaliser des tabs de la doc jquery il n'existe pas d'exemple qui fasse ce que je veux, c'est bien dommage.

Donc j'ai réussis avec mes liens externes aux onglet à changer les onglets, mais je n'arrive pas à passer mes variables :

le code html de mes liens externes :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div id="codigos">
<TABLE cellpadding='10px' border='1px'>
<TR><TD>
<a href="tab1.php?codigo=A1000&famille=D3500">0090003</a>
</TD><TD>
<a href="tab2.php" codigo="B2000" famille="E7000">0090004</a>
</TD><TD>
<a href="tab3.php" data-codigo="C3000" data-famille="F10500"">0090006</a>
</TD>
</TR></TABLE>
</div>

les trois ont une syntaxe différente ce sont des essais qui ne fonctionne pas.

Mon code jquery pour modifier mes onglets :

Code :

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
18
19
20
21
    $("#codigos a").click(function() {
    		     postData = 
    		     {
    		     "codigo" : $(this).data( "codigo" ), // pour avoir un nombre au lieu d'un texte : parseInt( ..., 10 )
    		     "famille" : $(this).data( "famille" )
    		     };
    		    $("#tabs-container").empty().append("<div id='loading'><img src='images/loading.gif' alt='Loading' /></div>");
    		    $("#page_tabs li a").removeClass('current');
    		    $(this).addClass('current');
 
    		    $.ajax({ 
    		    		    url: this.href, 
    		    		    type: 'POST', 
    		    		    data: postData,               /*('codigo=XXX,&famille=XXX'),*/
    		    		    success: function(html) 
    		    		   {
    		    		   	   $("#tabs-container").empty().append(html);
    		    		   }
    		    	  });
    return false;
    });

Question comment passer via mes liens href mes variables pour remplir le tableau postData ? Et ensuite comment passer seulement à l'onglet actif les variables, en restant sur l'onglet courant ? (Actuellement mes trois liens font changer d'onglets

)

Toujours merci beaucoup pour toute aide.

Sébastien

**bastien59960** · 23/07/2015, 22h48

Bien pour passer les variables c'était vraiment tout con :

Code :

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

<a href="tab1.php" onclick="codigo='B2000';famille='E7000';">0090003</a>

et dans le code :

Code :

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

1
2
3
4
5
6
 
    		     postData = 
    		     {
    		     "codigo" : codigo, // pour avoir un nombre au lieu d'un texte : parseInt( ..., 10 )
    		     "famille" : famille
     		     };

Maintenant mon soucis c'est de passer les variables à l'onglet actif, c'est a dire ne pas transmettre le href="tab1.php" mais juste mas variables et rafraichir l'onglet actif.

Quand je modifie mon liens html pour :

Code :

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

<a href="#" onclick="codigo='B2000';famille='E7000';">0090003</a>

ça me re-ouvre la page complète à l'intérieur du container de mes tabs.

Comment indexer l'onglet actif pour qu'il re-ouvre la même url que la précédente mais avec de nouvelles variables ?

Je ferais un résumé global quand ça fonctionnera exactement comme je veux.

Sébastien

**danielhagnoul** · 24/07/2015, 22h10

Désolé, le code que j'ai donné concerne une version obsolète de UI Tabs.

La seule réponse valable que j'ai trouvée est ici : https://forum.jquery.com/topic/passi...o-a-remote-tab

**bastien59960** · 24/07/2015, 22h21

Bon bien voila j'ai trouvé, comme toujours quand on trouve ça parait tout con.

Rappel l'idée de départ c'est de transmettre aux onglets (à l'onglet actif) des variables a partir d'une liste de liens externe aux onglets. Et garder le focus sur l'onglet en cour d'utilisation.

Le script :

Code :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
 
<script type="text/javascript">
codigo="blablabla";
famille="patata";
var postData = {};
 
$(document).ready(function() {
    $("#page_tabs li a").click(function() {
 
        $("#tabs-container").empty().append("<div id='loading'><img src='images/loading.gif' alt='Loading' /></div>");
        $("#page_tabs li a").removeClass('current');
        $(this).addClass('current');
        postData = 
    		     {
    		     "codigo" : codigo,
    		     "famille" : famille
     		     };
        $.ajax({ 
        	url: url, 
        	type: 'POST', 
        	data: postData, 
        	success: function(html) 
        	{
        		$("#tabs-container").empty().append(html);
        	},
        	error: function( xhr, status, errorThrown ) {
        		alert( "Sorry, there was a problem!" );
        		console.log( "Error: " + errorThrown );
        		console.log( "Status: " + status );
        		console.dir( xhr );
        		},
        	/*	
        	complete: function( xhr, status ) {
        		alert( "The request is complete!" );
        		}
        	*/	
                });
    return false;
    });
 
    $("#tabs-container").empty().append("<div id='loading'><img src='images/loading.gif' alt='Loading' /></div>");
    $.ajax({ url: 'tab1.php', type: 'POST', data: 'codigo=XXX, &famille=AZERTY', success: function(html) {
            $("#tabs-container").empty().append(html);
    }
    });
 
    $("#codigos a").click(function() {
    		     postData = 
    		     {
    		     "codigo" : codigo, // pour avoir un nombre au lieu d'un texte : parseInt( ..., 10 )
    		     "famille" : famille
     		     };
    		    $("#tabs-container").empty().append("<div id='loading'><img src='images/loading.gif' alt='Loading' /></div>");
    		    $("#page_tabs li a").removeClass('current');
    		    $(this).addClass('current');
 
    		    $.ajax({ 
    		    		    url: url, 
    		    		    type: 'POST', 
    		    		    data: postData,               /*('codigo=XXX,&famille=XXX'),*/
    		    		    success: function(html) 
    		    		   {
    		    		   	   $("#tabs-container").empty().append(html);
    		    		   }
    		    	  });
    return false;
    });
});
 
 
</script>

Les onglets en HTML : (Je n’utilise pas la fonction de TAB de jquery, juste ajax qui rafraichis mon tab container)

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div id="page_tabs">
    <ul  class="mytabs" id="tabs">
            <li class="current"><a href="tab1.php" onclick="url='tab1.php'">Tab 1</a></li>
            <li>                <a href="tab2.php" onclick="url='tab2.php'">Tab 2</a></li>
            <li>                <a href="tab3.php" onclick="url='tab3.php'">Tab 3</a></li>
    </ul>
 
<div class="mytabs-container" id="tabs-container">
Loading. Please Wait...
</div>

Les liens externe pour rafraichir l'onglet courant avec de nouvelles variables en POST

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<div id="codigos">
<TABLE cellpadding='10px' border='1px'>
<TR><TD>
<a href="#" onclick="codigo='C_Tab1';famille='AAAA';">0090003</a>
</TD><TD>
<a href="#" onclick="codigo='C_Tab2';famille='BBBB';">0090004</a>
</TD><TD>
<a href="#" onclick="codigo='C_Tab3';famille='CCCC';">0090006</a>
</TD>
</TR></TABLE>
</div>

Démonstration ici :

http://debucquoi.com/test/Ajax-Tabs/

merci Daniel pour ton aide, ça me semble très proche de ce que tu m'as suggérer, fallait juste que je lise quelques tuto sur jquery et ajax pour bien comprendre.
(étrange ci dessus, on ne peux pas mettre un liens sur une image comme dans PHPBB ?)

[Jquery - Tabs] Comment actualiser l'onglet jquery actif a partir d'un lien externe aux tabs ? [AJAX]

jQuery

Discussions similaires

Partager

Partager