Discussion :

[Plougy]

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 :

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

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

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
 // 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

[Sourrisseau]

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 :

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

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 :

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.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.

[Plougy]

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 :

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

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 :

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 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.