11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] [Jquery] fonction Load perturbe mon menu

Bonjour,

Je rencontre un problème de répétition d'évènement, lié à la fonction Load de Jquery.

Plutôt qu'utiliser un menu accordéon paramétré, j'ai souhaité le programmer moi-même avec la fonction .slideToggle('slow') qui affiche une zone div cachée contenant des liens.

J'ai constaté que si je charge une page externe dans la zone div centrale, mon menu se met à dérailler. Si j'effectue une autre action, mon menu fonctionne. Comment le chargement d'une page peut-il dérégler mon code ? On dirait que ce chargement incrémente le gestionnaire d'évènement.

Je mets un code - long désolé - mais qui se suffit à lui-même, avec un copier coller dans notepad on peut le tester à condition de créer une autre page à charger dans la div.
Pouvez-vous m'aider ? J'ai le sentiment de ne pas tout connaitre de Jquery car j'ai quitté l'informatique il a 6 ans pour la gestion, je programme avec un bouquin.
Merci pour vos réponses.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Notepad++">
<title>Compta-Facile</title>

<style type="text/css">
/* generaliste */
body {margin:0px;}

/* boutons menu haut */
div.bouton {position:fixed;left:20px;top:75px;width:210px;}

div.bouton a.entete
{font:8pt verdana;display:block;width:200px;line-height:40px;text-align:center;vertical-align:middle;background-color:#5BB9F5;
color:#FFFFFF;text-decoration:none;margin:5px;border-radius:5px 15px;}

div.bouton a.entete:hover, div.bouton a.entete:focus 
{background-color:#D30DD5;-webkit-transition:background-color 2s linear;
-moz-transition:background-color 2s linear;transition: background-color 2s linear;}

a.men
{font:8pt verdana;display:block;width:200px;line-height:20px;text-align:center;vertical-align:middle;
color:#0006EE;text-decoration:none;background-color:#FFFFFF;}

#var
{visibility:hidden}

/* ZONE LIENS secondaires */
#ess1{display:none;}
#ess2{display:none;}

/* zone DIV centrale qui reçoit les résultats des recherches avec JQUERY */
#central{
position:absolute;top:140px;right:10px;bottom:20px;left:300px;padding:10px;
font-family:"courier new", courier, sans serif;font-size:10pt;color:#5B1E8A;overflow:auto;}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".men").click(function (e) {
	e.stopPropagation();
	var page=$(this).attr('id'); //demande l'attr. pour identifier page à charger
	$("#central").load(page); // je charge la page dans la zone div
	});
});

$(document).ready(function() {
$(".entete").bind('click', function(e) {
e.stopPropagation();
var comp="#ess" + $(this).attr('id');
var doc=$("#var").val(); //une textbox invisible me dit quelle section est ouverte
	if (doc=="niet") // au départ elle est sur niet : le menu est replié
	{
	$("#var").val(comp);
	$(comp).slideToggle('slow');
	}
	else if (doc==comp) // la section ouverte est cliquée une deuxième fois
	{
	$(doc).slideToggle('slow');
	$("#var").val("niet");
	}
	else //on clique sur une section différente de celle déjà ouverte
	{
	$(doc).slideToggle('slow');
	$("#var").val(comp);
	$(comp).slideToggle('slow');
	}
});
});

</script>
</head>

<body>
<input type="text" id="var" size="10" value="niet">

	<!-- DIV MENU GAUCHE -->
	<div class="bouton">
		<a href="#" class="entete" id="1">Bases en comptabilité</a>
		<div id="ess1">
		<a class="men" href="#" id="flux.htm">Les flux financiers</a>
		<a class="men" href="#" id="bilan.htm">Bilan et compte de résultat</a>
		<a class="men" href="#" id ="plan.htm">Plan comptable 2013</a>
		</div>
		<a href="#" class="entete" id="2">Travaux d'inventaire</a>
		<div id="ess2">
		<a class="men" href="#" id="cloture.htm">Cloture des comptes</a>
		<a class="men" href="#" id="cap.htm">Charges à payer</a>
		</div>
	</div>
<!-- fin div MENU GAUCHE -->

		<!-- Zone DIV centrale qui recevra les résultats des requêtes -->
		<div id="central">
		</div>

</body>
</html>
Salut Ozelian,

Je ne comprends pas bien ton système de page externe. Le menu fonctionne avec ce que tu as transmis.
Pour simuler le problème que tu as rencontré, que doit-on faire? Copier quelque chose dans la div "central"?

Bien à toi.
arkham55 a écrit :
Salut Ozelian,

Je ne comprends pas bien ton système de page externe. Le menu fonctionne avec ce que tu as transmis.
Pour simuler le problème que tu as rencontré, que doit-on faire? Copier quelque chose dans la div &quot;central&quot;?

Bien à toi.


Il faut créer une page qui correspond aux id par exemple : flux.htm ou bilan.htm et dès lors qu'on charge ces pages externes, le menu ne fonctionne plus.
Je crains d'avoir mis le doigt sans le vouloir sur une "singularité" de Jquery, ce serait bien mon genre Smiley rolleyes
J'ai trouvé le problème :

Les pages HTML chargées dans une div ne peuvent pas inclure le fichier fonctions.js qui gère l'évènement click dans la page principale, sinon bien évidemment le navigateur gèrera deux fois l'évènement clic.

Je n'avais pas assez réfléchi en amont et m'étais servi d'un copier-coller pour créer mes nouvelles pages, sans éliminer mon include fonctions.js.

Merci Arkhram, merci à tous
Sujet clos
Aller à