Onclick: changer la valeur d'une option

Version imprimable

Bonsoir,

Je rencontre un petit problème en utilisant un appel de fonction sur un lien avec onclick="function('option1', 'option2', 'option3').

Exemple :
- Utilisateur clic sur le lien, le texte du lien devient --> unfollow
- Utilisateur re-clic sur le lien, le texte du lien reste --> unfollow
Code:

1 2 // XHTML <a href="javascript:void(0)" onclick="following('follow', '1', 10);" id="following">Follow</a>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 // function.js function following(type,user_id,follow_id) { if(type == 'follow') { $.post("/following/follow", { user_id:user_id, follow_id:follow_id }, function(data){ //alert(data); $("#following").text('unFollow'); var type = 'unfollow'; }); } else if(type == 'unfollow') { $("#following").text('Follow'); var type = 'follow'; } }
J'aimerais savoir comment faire pour que Javascript retienne le changement de l'option "type" après le premier clic de l'utilisateur.

Merci :)

Ce qu'il se passe

c'est que ta fonction contient des argument en statique, en l'occurrence 'follow' lors de l'appel à la fonction following().Vu que tu ne peux agir sur le onclick il s'agit de passer un appel à la fonction avec un attribut qui n'est pas statique. ( Je ne sais pas si je suis très clair .... mais normalement la suite devrait t'éclairer )
Code:

1 2 3 4 5 6 // on remplace <a href="javascript:void(0)" onclick="following('follow', '1', 10);" id="following">Follow</a> // par <a href="javascript:void(0)" onclick="following(this, '1', 10);" id="following">Follow</a>
Ici le 'this' fait référence à la balise 'a'. Ta fonction devient :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 // function.js function following(cet,user_id,follow_id) { type = $(cet).text(); if(type == 'Follow') { $.post("/following/follow", { user_id:user_id, follow_id:follow_id }, function(data){ //alert(data); $("#following").text('unFollow'); var type = 'unfollow'; }); } else if(type == 'unFollow') { $("#following").text('Follow'); var type = 'follow'; } }
En fait la je test la chaine de caractère dans la balise 'a' avec : $(cet).text();

Par contre cette solution n'est pas des plus élégante. Et généralement on essaye d'éviter l'écriture d'évènements ( onclick dans ton cas ) dans le code html. En fin ta fonction après "else if(type == 'unFollow')" ne propose pas de traitement. Mais peut être n'en es pas encore la.

Merci pour ta réponse!

J'ai cependant perssisté longtemps cette nuit afin de trouver une solution à mon problème... et cela a abouti à quelque chose :

Code:

1
2
3
4
5
// PHP soit class follow
<a href="javascript:void(0)" onclick="following('1', '10');" id="following" class="follow">Follow</a>
 
// ou class unfollow
<a href="javascript:void(0)" onclick="following('1', '10');" id="following" class="follow">Unfollow</a>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function following(user_id,follow_id) {
	if($('#following').hasClass("follow"))
	{
		$.post("/following/follow", { user_id:user_id, follow_id:follow_id },
			function(data){
				//alert(data);
				$('#following').text('unFollow');
				$('#following').removeClass('follow').addClass('unfollow');
		});
	}
 
	else if($('#following').hasClass("unfollow"))
	{
		$.post("/following/unfollow", { user_id:user_id, follow_id:follow_id },
			function(data){
				//alert(data);
				$('#following').text('Follow');
				$('#following').removeClass('unfollow').addClass('follow');
		});
	}
}

J'ai donc enlevé l'argument type dans ma fonction pour la remplasser ma une class css à mon objet #following.

:)