Discussion :

[CinePhil]

Bonjour,

Je suis confronté à un phénomène qui m'intrigue, même si j'ai une idée de la cause...

Soit une div masquée par défaut par diplay: none; et qui apparaît quand on passe la souris dessus ( via Ajax mais je ne pense pas que ça ait de l'importance pour le problème).

Cette div contient des liens cliquables et ceux-ci restent inactifs malgré l'apparition de la div.

En fait, cette div est répétée car il s'agit d'une sorte de menu d'actions possibles sous chaque message dans une liste de messages.

Et le plus étrange est que les liens de la div du dernier message fonctionnent et pas les autres !

Je subodore qu'il s'agit d'un problème de focus mais je ne sais pas trop comment le gérer.

Comment force t-on l'attribution du focus à une div ?

[SpaceFrog]

si je comprends le souci

les liens sont chargés dynamiquement au moyen d'un ajax dans une div masquée puis la div est affichée

Donc au moment de l'attribution des evenements (le ready), les a ne sont pas présents sur la page.
Il ne beneficient donc pas des attributions d'evènements

regarde du coté de live(), on() ou delegate() afin que ces elements créés dynamiquement après le chargement de la page heritent des evenements attribués sur le ready

[CinePhil]

Non, ce n'est pas tout à fait ça. C'est toute la div avec son contenu, donc les liens, qui sont masqués. Mais la div et ses liens sont chargés en même temps que la page.

Si je passe la souris sur le premier message, la div sous le message apparaît avec ses liens mais si je clique sur un lien, il ne se passe rien ; le lien semble inactif.

Si je fais la même chose avec le dernier message, le clic sur le lien agit correctement.

Comme la génération de la liste des messages, donc des divs cachées associées, est faite dans une boucle PHP, tous les messages et toutes les div sont faites de la même manière, avec le même code. C'est pour ça que je pensais à une histoire de focus qui ne redrait active que la dernière div chargée.

Et l'idée que j'avais était de forcer l'attribution du focus à la div qui apparaît grâce à l'Ajax qui la "show".

[SpaceFrog]

la va falloir un bout de code avec un exemple ...
il n'y a aucune raison qu'un element masqué perde son activité lorsqu'il est réaffiché.

[CinePhil]

OK alors voilà un résumé du code...

La génération de la liste de messages :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<?php 
foreach($tab_messages as $id_msg => $info)
{
?>
	<div class="divMessage">
		<div id="blocMessage<?php echo $id_msg; ?>" 
			class="blocMessage"
			onMouseOver="javascript:afficheBasMessage('basMessage<?php echo $id_msg; ?>');"
			onMouseOut="javascript:masqueBasMessage('basMessage<?php echo $id_msg; ?>');"
		>
//...
				<div id="basMessage<?php echo $id_msg; ?>"
					class="basMessage"
				>
					<div class="bar_links">
<?php 
	if($info['id_crea'] != $_SESSION['coords']['id'])
	{
		// Si le créateur du message n'est pas le membre connecté, on affiche l'option "Partager"
?>
						&nbsp;&nbsp;
						<a id="<?php echo $id_msg; ?>" 
							href="javascript:afficheShareIt(<?php echo $id_msg; ?>, '<?php echo $info['message']; ?>');" 
							class="souligneSurvol"
						>
							<?php echo $trad_share; ?>							
						</a>
						&nbsp;<img src="images/sp.png" />&nbsp;
						<?php 
	} // fin if($info['id_crea'] != $_SESSION['coords']['id'])
 
	if($info['nb_reponses'] == 0)
	{
		// S'il n'y a pas de commentaire, on peut directement répondre au message
?>
						<a id="reply<?php echo $id_msg; ?>"
							href="javascript:afficheDivReply('divFirstComment<? echo $id_msg; ?>');"
							class="souligneSurvol"
						>
							<img src="images/reply.png" />&nbsp;
							<?php echo $trad_reply; ?>
						</a>
<?php
	} // Fin if($info['nb_reponses'] == 0)
	else 
	{
		// il y a au moins une réponse on affiche le nb de réponses et le lien pour les afficher
?>
						<a href="#" 
							onclick="javascript:$('#moreThan<?php echo $id_msg; ?>').show(); return false;"
							class="souligneSurvol"
						>
							<img src="images/bubble.png" />
							<?php echo ($info['nb_reponses'] > 1)?$info['nb_reponses'].' '.$trad_comment.'s':$info['nb_reponses'].' '.$trad_comment ; ?>
						</a>
<?php 
	} // fin du else de if($info['nb_reponses'] == 0)
?>						
						&nbsp;<img src="images/sp.png" />&nbsp;
						<a href="javascript:maj_vote(<?php echo $id_msg;?>,'<?php echo $_SESSION["coords"]["id"]; ?>', '<?php echo $la_langue; ?>', 'msg');"
							class="souligneSurvol"
						>
<?php 	
	if($info['vote_du_joueur'] == 1)
	{
		// Le joueur a voté pour ce message
		echo $trad_unlike;
	}
	else
	{
		// Le joueur n'a pas encore voté pour ce message
		echo $trad_like;
	}
?>
						</a>
					</div><!-- fin bar_links -->

La div masquée par défaut est :

Code CSS :

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

1
2
3
4
5
6
7
.basMessage
{
	display: none;
	float: left; 
	width: 100%; 
	margin-top: 3px;
}

Les programmes Javascript qui font apparaître/disparaître la div quand la souris passe sur le message :

Code Javascript :

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

1
2
3
4
5
6
7
8
9
function afficheBasMessage(objet)
{
	$("#"+objet).show();
}
 
function masqueBasMessage(objet)
{
	$("#"+objet).hide();
}

Et, par exemple, le lien J'aime / J'aime plus qui est à la fin de l'extrait PHP présenté ci-dessus ne fonctionne pas pour tous les messages.

Bizarre autant qu'étrange non ?

[dukej]

Bonjour.

Ce serait bien de voir le code HTML généré histoire de pas se prendre la tête à deviner ce que PHP génère ...