Discussion :

[Jean-Michel 25]

Bonjour

Grâce à ce formidable forum j'ai bien avancé sur une page. Juste un détail que je ne peux pas régler tout seul.
Comment imposer un délai au déclenchement d'un événement mouseover avec jquery-ui ?

Le contexte :
Dans une page, sur survol de certains span, le contenu d'une div est modifié par Ajax.
Ca marche très bien, et voici le code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
   $(".ma_classe").mouseover(function() {
	 var theId = this.getAttribute('id');			   
	 $.ajax({
		 type: "POST",
		 url: "ajax.php",
		 data: 'id='+theId,
		 success: function(html){
			$('#ma_destination').html(html);
		 }  
	 });
 
  })

Principe :
J'ai plusieurs span, de classe "ma_classe".
Cette fonction récupère l'id du span survolé, qui est envoyé en paramètre au script ajax.php.
Au retour de celui-ci, le contenu de mon div "ma_destination" est modifié par ce qu'a renvoyé le script ajax.php

Le problème :
J'ai plusieurs span, côte à côte.
Je survole le premier span, mon script modifie bien le contenu de la div à droite de la page. OK !
Ce contenu reste jusqu'à ce qu'on survole un autre span.
Maintenant je veux cliquer dans cette div, à droite. Pour cela je suis obligé de survoler d'autres span, qui du coup modifient le contenu de la div avant que j'ai pu l'atteindre !!!
Moralité, dans ce cas je ne peux jamais atteindre mon contenu contextuel pour cliquer sur un de ses liens par exemple.

Solution ?
Il faudrait que le div contextuel soit modifié après un certain temps de survol sur un lien.
Mais là, incapable de trouver la bonne astuce. Il ne pas d'un widget, mais de jquery-ui tout nu, et les exemples que j'ai trouvés concernant .tooltip, .qtip ou autres libraires...

.delay() à différents niveaux donne au mieux rien du tout, au pire une erreur de syntaxe (delay is not a funtion)...

Je suis persuadé que vous pourrez me donner une piste !?
Un grand merci par avance

[Jean-Michel 25]

Je croyais avoir trouvé, avec ce code :
En fait ce timer retarde bien l'affichage, mais le temps de réaction au survol est toujours immédiat...

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
$(".classe").mouseover(function(){
	var theId = this.getAttribute('id');	
    timer = setTimeout(function(){
 
		 $.ajax({
			 type: "POST",
			 url: "ajax.php",
			 data: 'id='+theId,
			 success: function(html){
				$('#destination').html(html);
			 }  
		 });  
    },2000/* <--- the delay */)
}).mouseleave(function(){
    clearTimeout(timer);
});

[danielhagnoul]

Rappels

1) AJAX est asynchrone, la méthode "success" sera traitée à un moment indéterminé.
2) L'usage de l'événement "mouseover" est déconseillé depuis des années.
Chaque mouvement du pointeur à l'intérieur de l'élément du DOM, déclenche un événement. Il faut utiliser "mouseenter" et "mouseleave".
3) Pour créer un gestionnaire d'événement, on doit utiliser la méthode on().

Code :

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

1
2
3
4
$( ".ma_classe" ).on( "mouseenter", function( ev ) {
  // var theId = this.id;
  // ...
});

Pour le reste, je ne comprends pas. Il me manque les codes CSS et HTML pour reproduire le problème.

[Jean-Michel 25]

Merci pour ces pistes, que je vais suivre.

Il n'y a pour ainsi dire pas de css, du moins il n'a aucune incidence sur les scripts;
Quant au html , c'est en gros ceci :

Dans la page, une div contient des span sensibles au survol :

Code :

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

1
2
3
4
5
<div>
&bull;<span id="S136" class="ma_classe">Un</span>
&bull;<span id="S49" class="ma_classe">Deux</span>
etc.
</div>

Une autre div (id #ma_destination) aura son contenu modifié par le script.


Je viens de tester ton code, qui roule.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$( ".ma_classe" ).on( "mouseenter", function( ev ) {
		var theId = this.getAttribute('id');			   
		 $.ajax({
			 type: "POST",
			 url: "ajax.php",
			 data: 'id='+theId,
			 success: function(html){
				$('#ma_destination').html(html);
			 }  
		 });
});

Une piste, ensuite, serait de jouer sur mouseleave, et de "verrouiller" le contenu du div pendant un certain temps.
Ainsi, en quittant le lien, on a le temps de survoler les autres pour atteindre le div sans déclencher de mise à jour.

Je vais essayer en partant du bon pied avec le script révisé selon tes conseils.
Merci en attendant
JM

[Jean-Michel 25]

C'est à peu près résolu.

Avec le code ci-dessous, le comportement est à peu près celui attendu :
- quand je survole un span, le contenu de la div distante est mise à jour en ajax et un jeton est positionné (j'utilise le contenu d'une div)
- sur mouseleave, le jeton est libéré au bout d'un peu plus d'une seconde
- quand je survole un 2e span, le script ne réagit que si le jeton est libéré ou identique à l'élément courant (on a tremblé avec la souris...)

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
 
	$( ".ma_classe" ).on( "mouseenter", function( ev ) {
		/* récupérer l'identifant de l'appelant */
		var theId = this.getAttribute('id');	
		/* lire le contenu du jeton http://www.debray-jerome.fr/tips-recuperer-le-texte-d-039-une-balise-html-en-javascript-16.html */
		var elt = document.getElementById('jmtimer');
		var monTexte = elt.innerText || elt.textContent;
		/* si jeton est à 0 ou idem appelant, on agit */
		if (monTexte==0 || monTexte==theId){
		 /* on positionne le jeton */
  		 $("#jmtimer").html(theId); 							
		 $.ajax({
			 type: "POST",
			 url: "ajax.php",
			 data: 'id='+theId,
			 success: function(html){
				if ($("#jmtimer").attr('class')!='opended'){			 
					$('#div_destinataire').html(html);
				}
				/* modf affichge pour débug */
				$("#jmtimer").addClass("opened");					
			 }  
		 });
		}
	}).on( "mouseleave", function( ev ){
		var theId = this.getAttribute('id');			
		   /* on ne libère le jeton qu'après un délai */
			setTimeout(function(){
				$("#jmtimer").removeClass("opened"); 
				$("#jmtimer").html('0'); 				
			}, 1400);			
	});

J'ai les briques pour faire quelque-chose d'efficace ; je sens que je ne suis pas loin du but.
Je voudrais un autre comportement : ne réagir que quand on est depuis 1 seconde sur le même span. Plus qu'à trouver la logique, mais avec une petite nuit de sommeil, c'est un peu difficile...

[Jean-Michel 25]

Enfin résolu.

Rappel de l'objectif :
Les "liens" (des span sensibles au mouseenter) ne réagissent que si on reste dessus une petite seconde.
Ainsi, lorsqu'on est sur un lien assez longtemps, une div ailleurs dans la page se met à jour avec un contenu contextuel récupéré par Ajax.
Si on veut aller cliquer dans cette div distante, on survole d'autres liens, mais trop rapidement pour qu'il ne réagissent. Ainsi le contenu de ma div distante n'est pas altérée.

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
 
    var monJeton;
	$( ".mes_span_sensibles" ).on( "mouseenter", function( ev ) {
		var theId = this.getAttribute('id');	
		monJeton = setTimeout(function(){
			 $.ajax({
				 type: "POST",
				 url: "ma_fonction_ajax.php",
				 data: 'id='+theId,
				 success: function(html){
					$('#ma_div_cible').html(html);
				 }  
			 });
		}, 700);			
	}).on( "mouseleave", function( ev ){
		clearTimeout(monJeton);
	});

Merci à Daniel pour m'avoir mis le bon chemin, et à http://www.astral-consultancy.co.uk/...doco.cgi?11570 pour la manipulation du timer.