Lien dans une div masquée

Version imprimable

06/07/2012, 22h38
CinePhil

Lien dans une div masquée

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 ! 8O

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 ?
06/07/2012, 23h46
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
07/07/2012, 01h18
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".
07/07/2012, 12h44
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é.

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

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

Code:

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:

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:

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 ?

08/07/2012, 09h05
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 ...

Citation:

Envoyé par dukej

- du code : OK
- du code HTML généré histoire de pas se prendre la tête à deviner ce que e PHP génère : FAIL

En clair ?
Tu veux le HTML de la page envoyée au navigateur ?
Voilà ce qui est généré par le code PHP donné précédemment.

Code:

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
<div onmouseout="javascript:masqueBasMessage('basMessage5');" onmouseover="javascript:afficheBasMessage('basMessage5');" class="blocMessage" id="blocMessage5">
	<div class="donneesMessage">
		<!-- corps du message non montré dans cet extrait de code -->
		<div class="basMessage" id="basMessage5" style="display: none;">
			<div class="bar_links">
				&nbsp;&nbsp;
				<a class="souligneSurvol" href="javascript:afficheShareIt(5, 'message test de durand');" id="5">
					Partager							
				</a>
				&nbsp;<img src="images/sp.png">&nbsp;
				<a class="souligneSurvol" onclick="javascript:$('#moreThan5').show(); return false;" href="#">
					<img src="images/bubble.png">
					10 commentaires						
				</a>
				&nbsp;<img src="images/sp.png">&nbsp;
				<a class="souligneSurvol" href="javascript:maj_vote(5,'16', 'fr', 'msg');">
					J'aime
				</a>
			</div><!-- fin bar_links -->
			<div class="like">
				<div onclick="maj_vote(5,'16', 'fr', 'msg');" style="background-image: url('images/star-on.png');" class="etoileMessage" id="star_msg5">
				</div>
				<a class="souligneSurvol" href="javascript:afficherWhoLike(5, 16);" id="likeThat5">
					2 personnes aiment ça
				</a>
			</div><!-- Fin like -->
		</div><!-- Fin basMessage -->
	</div><!-- Fin donneesMessage -->
</div>

08/07/2012, 10h32
dukej

En regardant ton code, il n'y a aucune raison que cela ne marche pas.

DOnc on peut extrapoler sur plusieurs points :
- Tu as une erreur JS qui se génère dans chacun de tes liens
Active la console JS (firebug ou console chrome, etc...) et regarde ce qu'il se passe quand tu cliques.

- Tu as un script qui a binder l'evènement "click" sur tous les liens ou sur "document" et qui fait un e.preventDefault().
regarde ce qu'il se passe quand tu désactives tous les autres scripts
08/07/2012, 10h59
CinePhil

Effectivement, j'avais une erreur Javascript au clic sur J'aime car on a modifié le principe du fonctionnement et le programme Javascript est à revoir.

Merci ! :ccool: