Discussion :

[CinePhil]

Bonjour.

Soit un bouton "Abonné".

L'événement onclick de ce bouton lance une fonction Ajax pour supprimer l'abonnement.

Voici le code du bouton :

Code :

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

1
2
3
4
5
6
// Le membre connecté suit déjà le votant
		$html .=		'<div id="btn_following_'.$id_votant.'">';
		$html .=			'<img id="img_btn_following_'.$id_votant.'"
								src="images/profil/btn_following_'.$la_langue.'.png"
								onclick="unfollow('.$id_membre_connecte.', '.$id_votant.', \''.$la_langue.'\');" 					
							/>';

Ainsi, la fonction Ajax se lance quand on clique sur le bouton, la suppression en BDD se fait et le bouton est changé en "Suivre".

Si j'ajoute les événements onmouseover et onmouseout pour changer le bouton "Abonné" en "Se désabonner" au passage de la souris et vice-versa quand la souris quitte le bouton, le changement d'image se fait bien mais le bouton ne fonctionne plus ; on dirait que l'événement onmouseover empêche la détection de l'événement onclick.

Normal ?

Une idée à me soumettre ?

[utopman]

Bonsoir,

1) pas normal

2) utiliser jquery

[CinePhil]

2) utiliser jquery

C'est en partie ce que j'essaie de faire mais de quelle manière ?

[Willpower]

Si j'ajoute les événements onmouseover et onmouseout pour changer le bouton "Abonné" en "Se désabonner"

Peut-on voir ce code "ajouté" qui est vraisemblablement la source du problème ?

[CinePhil]

Peut-on voir ce code "ajouté" qui est vraisemblablement la source du problème ?

Voilà...
Le bouton est dans une fancybox dont le contenu contient entre autre ce code :

Code php :

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
// Le membre connecté suit déjà le votant
		$html .=		'<div id="btn_following_'.$id_votant.'">';
		$html .=			'<img id="img_btn_following_'.$id_votant.'"
								src="images/profil/btn_following_'.$la_langue.'.png"
								onclick="unfollow('.$id_membre_connecte.', '.$id_votant.', \''.$la_langue.'\');" 					
								onmouseover="change_btn_following(this, \''.$la_langue.'\', '.$id_membre_connecte.', '.$id_votant.')"
								onmouseout="change_btn_unfollow(this, \''.$la_langue.'\', '.$id_membre_connecte.', '.$id_votant.')"	
		/>';	
	}
	else 
	{
		// Le membre connecté ne suit pas encore le votant
		$html .=		'<div id="btn_follow_'.$id_votant.'">';
		$html .=			'<img src="images/profil/btn_follow_'.$la_langue.'.png"
								style="cursor: pointer;"
								onclick="follow('.$id_membre_connecte.', '.$id_votant.', 0, \''.$la_langue.'\');"
							/>';

Quand le membre suit déjà le votant, le bouton "Abonné" (following) est affiché et si le membre passe la souris sur le bouton, la fonction change_btn_following ci-dessous est lancée :

Code Javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
 * change_btn_following
 * change le bouton following (abonné) en unfollow (se désabonner)
 * @param id
 */
function change_btn_following(obj, langue, id_membre_connecte, id_votant)
{
	obj.src = 'images/profil/btn_unfollow_' + langue + '.png';
	obj.style.cursor = 'pointer';
	var texte = 'unfollow(' + id_membre_connecte + ', ' + id_votant + ', \'' + langue + '\')';
 
	obj.onclick = texte;
 
}

En contrôlant avec Firebug, le nouveau contenu de l'image est juste :

Code HTML :

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

<img id="img_btn_following_5" onmouseout="change_btn_unfollow(this, 'fr', 16, 5)" onmouseover="change_btn_following(this, 'fr', 16, 5)" onclick="unfollow(16, 5, 'fr');" src="images/profil/btn_unfollow_fr.png" style="cursor: auto;">

Mais si l'utilisateur clique sur ce bouton, l'action prévue pour onclick ne s'exécute pas.

Si je retire les onmouseover et onmouseout de la balise, onclick fait bien son boulot.

[NoSmoking]

Bonjour,
l'affection du onclick dans la fonction change_btn_following annule celle définie dans la balise

Ta déclaration dans la fonction n'est pas correcte il faudrait que tu fasses

Code :

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

1
2
3
obj.onclick = function(){
  unfollow( id_membre_connecte, id_votant, langue);
}

pour test

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<title>[Test]</title>
<script type="text/javascript">
function newFct( obj, txt){
  obj.onclick = function(){
      alert('newFct -> ' + txt);
      return false;
    };
}
</script>
</head>
<body>
<a href="#"
  onclick="alert('onclick!'); return false"
  onmouseover ="newFct( this,'Tssst!!!')"
>TEST</a>
</body>
</html>

[CinePhil]

Effectivement ça fonctionne mieux comme ça, merci.