Discussion :

[Alexdezark]

Bonjour à tous,

Je cherche à changer un label dans un tabs ?

Rien dans la doc jquery...

quelqu'un sait-il comment faire ?

Bonne journée à tous

[Sourrisseau]

préciser ta demande. Car tu n'indiques pas à quel moment tu désires changer de label. Mais sinon ce n'est pas trop compliqué. Par exemple le cas ou on sélectionne un des onglets (tabs).

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript">
	$(function() {
		$("#tabs").tabs({
			select: function(event, ui) { 
				$(ui.tab).text('Salut jquery ui');
			}
 
			});
	});
	</script>

Ce qui et intéressant , entre autre , avec jquery ui c'est que l'on peut facilement récupérer les évènements pour pouvoir faire des traitements.

Si le cœur t'en dis , essaye ce code avec firefox et firebug.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<script type="text/javascript">
	$(function() {
		$("#tabs").tabs({
			select: function(event, ui) { 
                                console.debug(ui);
				$(ui.tab).text('Salut jquery ui');
			}
 
			});
	});
	</script>

Avec console debug tu récupères un objet qui contient en tas d'informations précieuses.

Si tu veux plus de précisions sur ce que tu fais , laisse une description précise de ce tu désires réaliser.

[Alexdezark]

Bonjour sourisseau,

Merci de ta réponse.

Quelques précisions :

L'évènement déclencheur est produit par un click sur un bouton hors du tabs.

Lorsque l'on clique sur ce bouton, l'onglet 5 de mon tabs qui se nommait "calendrier" doit se nommer "inserer".

Son url change alors aussi avec :

Code :

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

$tabs.tabs("url",5,url);

Mais ce que je cherche c'est comment changer à la volée le label de l'index 5.

[Sourrisseau]

pour la précision . Voici une fonction simple pour gérer ton titre d'onglet :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<script type="text/javascript">
	$(function() {
		$("#tabs").tabs();
	});
 
	function change_label(x){
		$("a[href='#tabs-" + x + "']").text('inserer')
	}
	</script>

et dans ton html ton boutton :

Code :

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

1
2
 
<input type="button" value='test' onclick='change_label(5)'>

Dis moi si cette solution te convient.

[Alexdezark]

J'ai essayé de l'integrer à ma fonction de façon basique mais cela ne fonctionne pas :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
creActi=function(){
var IDClient=$("#IDClient").val();
url="actis/Ajax/acti.php?IDClient="+IDClient+'&psswd='+psswd+'&login='+login;
$tabs.tabs('option', 'disabled', [0,1,2,3,4]);
 
$tabs.tabs("url",5,url); 
$tabs.tabs("enable",5);
$tabs.tabs("option", "selected",5);
 
$("a[href='#tabs-5']").text('inserer');
 
};

D'un autre coté je ne sais pas si le href correspond bien puisqu'il correspond à l'url changée plus haut ???

PS : je vais être absent jusqu'à 13h00 je me reconnecte au retour

[Sourrisseau]

Ce que tu est en train de faire ...
dans ta fonction remplace :

Code :

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

1
2
 
$tabs.tabs('option', 'disabled', [0,1,2,3,4]);

par

Code :

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

1
2
3
4
5
6
7
8
 
$("#tabs").tabs({
			disabled: [0, 1 , 2 , 3 , 4 ],
			enable: function(event, ui) { 
				if (ui.index==4) $(ui.tab).text('Inserer');
			}
 
		});

Voili j'espère que cela va marcher ...

[Alexdezark]

c'est pas tout à fait ça en fait.

Parce que ce n'est pas systématiquement que le label change lorsqu'il est enable, c'est juste quand on clique sur ce bouton.

le click sur un autre bouton rend le tab index 5 "enable" aussi mais sans changement de label...

Mon tabs lui est initialisé dans la page qui le charge comme ceci

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
$(document).ready(function() {
$tabs=$("#example").tabs({
disabled:[2,3,4,5], 
collapsible:true,
load:function(event, ui){
if((ui.index!=2)&&($("#divExistClient").length!=0)) $("#divExistClient").remove();
if((ui.index==0)||(ui.index==1)){ 
$tabs.tabs('disable',2);
$tabs.tabs('disable',3);
$tabs.tabs('disable',4);
};
},
 
}); 
});

c'est donc une fonction liée à un bouton qui doit déclencher (uniquement dans ce cas) le changement de label

[Sourrisseau]

serait bien utile , cela donnerai le code suivant

Code :

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

1
2
3
4
5
6
7
8
9
 
var text_inserer = false;
$("#tabs").tabs({
			disabled: [0, 1 , 2 , 3 , 4 ],
			enable: function(event, ui) { 
				if (ui.index==4 &&  text_inserer) $(ui.tab).text('Inserer');
			}
 
		});

et dans ton boutton , sur le onclick tu passe cette valeur a true ;

Code :

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

1
2
 
<input type="button" value='test' onclick='text_inserer = true;ma_fonction()'>

[Alexdezark]

alors voila ou j'en suis :

ceci sur le bouton fonctionne :

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
creActi=function(){
var IDClient=$("#IDClient").val();
url="actis/Ajax/acti.php?IDClient="+IDClient+'&psswd='+psswd+'&login='+login;
$tabs.tabs('option', 'disabled', [0,1,2,3,4]);
 
$("#example :children").each(function(event, ui){
if(ui.index==5) $(ui).text('Inserer');
});
 
$tabs.tabs("url",5,url); 
$tabs.tabs("enable",5);
 
$tabs.tabs("option", "selected",5);
 
};

Comme j'ai toujours le cas de l'autre bouton, donc changement de nouveau du label vers le label d'origine

J'essaye de plutot faire comme ceci

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
$(document).ready(function() {
$tabs=$("#example").tabs({
disabled:[2,3,4,5], 
collapsible:true,
load:function(event, ui){
if((ui.index!=2)&&($("#divExistClient").length!=0)) $("#divExistClient").remove();
if((ui.index==0)||(ui.index==1)){ 
$tabs.tabs('disable',2);
$tabs.tabs('disable',3);
$tabs.tabs('disable',4);
};
},
enable:function(event, ui){
if(ui.index==5) $(ui).text(($(ui).text=='Calendrier') ? 'Inserer' : 'Calendrier');
}
 
});
});

Mais pour le moment cela ne fonctionne pas...

J'ai essayé de mettre

Code :

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

1
2
3
enable:function(event, ui){
alert(ui.index);
}

Mais curieusement le seul qui ne renvoi rien au moment ou il est enabled est index 5

une idée ?

[Sourrisseau]

pour le moment c'est un peu trop compliqué pour moi de comprendre la logique de ce que tu fais et je ne peux te proposer une solution sans que cela n'entraine un autre problème.

Si le label doit changer en fonction de tel ou tel action , la valeur de text_insert n'est plus un boolean mais une string que tu définir à Calendrier par exemple au départ et puis en fonction du bouton sur lequel tu cliques tu changes sa valeur.

Mais j'ai un peu peur de ne pas saisir exactement ce que tu veux faire.

Code :

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

1
2
3
4
5
6
7
8
9
10
 
 
var text_inserer ='Calendrier';
$("#tabs").tabs({
			disabled: [0, 1 , 2 , 3 , 4 ],
			enable: function(event, ui) { 
				if (ui.index==4 &&  text_inserer) $(ui.tab).text('Inserer');
			}
 
		});

et

Code :

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

1
2
3
 
 
<input type="button" value='test' onclick="text_inserer = 'Insérer';ma_fonction()">

Concernant 'Mais curieusement le seul qui ne renvoi rien au moment ou il est enabled est index 5 ' c'est que la numérotation commence a 0 , par conséquent si tu as 5 onglets les index sont 0,1,2,3 et