Discussion :

[llaffont]

Salut,

J'ai un comportement bizarre sur ma page.

J'ai plusieurs ancres HTML qui me servent d'interrupteur.
La majorité de ces ancres me permettent de réduire le contenu d'un DIV définie et sont formulés comme suit :

Code :

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

1
2
3
4
5
 
<div id="Reduc" class="alignLeft">
	<a href="#" class="Reduire" >Réduire</a>	
<div id="cibleAreduire"> BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla</div>
</div>

Ici tout fonctionne nickel.

Sur la même page j'ai une ancre qui me permet de valider une ligne de formulaire.

Voici en gros ce code :

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
 
<div id="Reduc" class="alignLeft">
	<a href="#" class="Reduire" >Réduire</a>	
	<div id="cibleAreduire"> 
	<table>
		<tbody>
			<tr> 
				<td>Blabla</td>
				<td>Blabla</td>
				<td><a href="#" class="Valider" >Valider</a></td>
			</tr>
		</tbody>
	</table>
	</div>
</div>

Cette ancre là fonctionne pour son rôle d'interrupteur. Mais elle joue les funambules car lorsque je clique dessus elle lance le script JAVA et me remets l'ascenseur en haut de la page.

La faute certainement à href="#".

Ma question est : Pourquoi href="#" est interprété ici pour "valider" alors que pour réduire "Réduire" cela n'a aucune incidence sur l'ascenseur ?

[yann0807]

Peut-être que pour ton premier lien , il n'y a pas de scroll. Tu sais tu peux utiliser a la place de # javascript:void(0) au moins la page ne se rafraichit pas.

[E.Bzz]

Bonjour,

Ma question est : Pourquoi href="#" est interprété ici pour "valider" alors que pour réduire "Réduire" cela n'a aucune incidence sur l'ascenseur ?

La réponse se trouve dans les fonctions que tu utilises lors du clic sur ces liens, et la manière dont tu les affectes aux objets.

En gros la méthode à utiliser (il y a bien sûr des variantes)

Code :

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

<a href="#" onclick="traitement(); return false;">blabla</a>

le return false empêche l'appel au href (même logique que le onsubmit d'un <form>).

Si la fonction fait déjà un return false, un return traitement() suffit ...

A+

[llaffont]

Ok ! je comprends.

Mais jusqu'à présent j'utilisais le "gestionnaire d'évènement" de JQUERY $(function(){});

Mon click il est interprété :

Code :

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

1
2
3
4
 
$(".Valider").click(function(){
	ActionCreateUser(this);	
});

Et la fonction ActionCreateUser() retourne de la mis à jour d'aspect.

Le fait d'utiliser "onclick="traitement(); return false;"" ne me dérange pas mais pour une lecture plus propre de mon code vaut-il mieux que je mettes tous mes ancres avec onclick="traitement(); return false;" ou que je laisse à $(function(){}); traiter les évènements ?