11521 sujets

JavaScript, DOM et API Web HTML5

Problème exécution plusieurs fois scripts JS

Bonjour, je développe actuellement une petite application utilisant jQuery. J'ai une page principale main.php comportant une en-tête et un menu et lorsque je clique sur l'un des liens du menu, je charge la page correspondante dans un div à l'aide de la méthode load(). A la fin de chaque page chargée, il y a une balise <script> chargeant les fonctions jQuery spécifiques à la page chargée. Cela fonctionne, mais lorsque je reviens plusieurs fois sur la même page, j'ai l'impression que le navigateur recharge le script jQuery et au bout du compte il exécute les fonctions autant de fois que j'ai affiché la page...

Par exemple, si je vais sur la page1, ça marche nickel. Si je vais sur la page2 aussi. Mais si je retourne sur la page1, lorsque je vais exécuter une action, type validation de formulaire via $.get(), il me le valide 2 fois. Si je vais sur une page3 puis que je reviens encore sur page1, il me l'exécute 3 fois, etc. Comment empêcher le navigateur de cumuler plusieurs fois le même scripts ? Un peu comme un require_once ou include_once en php ?
Bonjour, merci de l'intérêt que tu portes à mon souci, malheureusement cette application n'est pas accessible en ligne. Je peux préciser la structure :

Le template :

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8" />
			<meta name="viewport" content="width=device-width" />
			<title>TITRE</title>
    		<link rel="stylesheet" type="text/css" href="styles/defaut.css"/>
		</head>
		<body> 
			<div id="container"">
				<div id="volet_gauche">
					<header>
						<img src="styles/logo.png" alt="logo" style="width:100px" /><br/>
						MA SUPER APPLICATION DE OUF
					</header>
					<nav id="menu_principal">
						<ul>
							<li class="link" data-destination="page1" id="link_page1">Accès page 1</li>
<?php 						<li class="link" data-destination="page2" id="link_page2">Accès page 2</li>
							<li class="link" data-destination="page3" id="link_page3">Accès page 3</li>
							<li class="link" data-destination="deconnexion">QUITTER</li>
						</ul>
					</nav>
				</div>
				<div id="main">
					<div id="chargement">Chargement en cours...</div>
				</div>
			</div>		
			<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
			<script type="text/javascript" src="./scripts/ajax.fonctions_communes.js"></script>
		</body>
	</html>


Le script jQuery contenu dans ajax.fonctions_communes.js qui charge le contenu dans le div #main :

$('.link').click(function() {
		var destination = $(this).attr('data-destination'); //Récupération du nom de la page à aficher		
		$('#main').load('pages/'+destination+'.php'); //Chargement de la page dans le div
	});


...et enfin la structure d'une page :

	<section>
		<h2>Page 1</h2>
		<p>Tout un tas de contenu super intéressant</p>
	</section>
	<script type="text/javascript" src="./scripts/ajax.page1.js"></script>


Lorsque je parcours mon application et que je charge plusieurs fois une même page, les fonctions contenues dans le script ajax.page1.js s'exécutent à la suite autant de fois que j'ai chargé la page --''
Modifié par Zozorus (29 Aug 2016 - 16:56)
salut,
c'est tout à fait normal vu que tu inclus la balise <script> à chaque fois que tu charges la page.

Tu peux soit passer par une délégation d'évènement en JS (qui peut être un peu chiante si on n'a pas l'habitude), ou bien penser ton script JS différemment.

Tu pourrais inclure tout le code destiné à être chargé dans une fonction et puis tu ne chargerais le fichier qu'une fois. Si le fichier est déjà chargé, tu appelles simplement la fonction.
Tu devras faire aussi attention au déclenchement multiple lié à un même évènement que tu peux régler avec la méthode stopImmediatePropagation de l'objet Event.

En gros, tu tentes de récupérer l'élément <script> avec querySelector, du genre

document.querySelector('script[src="+ chemin +"]')

où chemin est le fichier source à partir duquel tu chargeras ton script. Si une valeur est retournée, cela signifiera que le script est déjà chargé, si non, tu le crées avec les méthodes createElement et appendChild.

PS : en-tête est un nom masculin
Sujet clos
Aller à