Exécution script externe

**StripMat** · 23/11/2014, 16h09

Bonjour, je suis novice en javascript / jQuery et je rencontre un problème.

Je cherche à réaliser un formulaire ou les insertions / modifications / supressions seront dynamiques, j'ai plutôt bien avancé seulement j'ai quelques difficultés à inclure ou éxecuter mon script.

Voici le début de mon script, celui-ci ne contient qu'une fonction mais je ne veux pas l'écrire dans toutes mes pages, donc j'ai choisi de l'inclure en tant que fichier externe.

Code :

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

1
2
3
4
5
6
$(document).ready(function() 
	{  
	 $(".dynamic-edit-class").click(function()  
	  { 
	   if( $(this).attr("contenteditable") == "true") 
	   {

Le problème c'est que si je comprend bien, le script s'éxecute une fois que toute la page est bien chargée, et la fonction devrait s’exécuter au moment d'un clic sur un objet de la classe "dynamic-edit-class". Enfin c'est ce que je voudrais réaliser.

C'est là le problème, si ma fonction avais été écrite directement dans ma page PHP contenant le formulaire, sa aurait fonctionné (j'ai développé sa avec une page de test ou tout était écrit, script/html/php).

J'ai essayé d'encapsuler le code de mon fichier.js dans une fonction et de l'appeler via un OnClick sur mes éléments de classe "dynamic-edit-class", sans succès.

Je ne sais pas si je suis très claire, en gros je veux que ma page charge l'intégralité du code de mon fichier.js, pour qu'a chaque clic sur un élément précis, le script s’exécute. J'voudrais pas avoir à utiliser les évènements OnClick, mais plutôt que mon script détecte quand je clic sur un élément de la classe cible.

J'précise que j'ai déja demandé à google, testé diverses solutions mais sans succès !

**Darkaurora** · 23/11/2014, 16h33

je pense que tu lances bien le chargement du fichier lors du click, en revanche ce que tu n'as pas saisie c'est qu'il faut laisser le temps à ton navigateur de charger le script et de l'interpréter. En gros tu dois trouver un événement qui te diras "le script est prêt" et ensuite seulement effectuer les actions nécessaires.

**StripMat** · 23/11/2014, 16h38

Hmm, je suis pas certain d'avoir bien saisi, je pense vraiment que mon code n'est même pas executé !

Lors d'un clic sur un des champs modifiable, un alert devrait pop, sauf que même au bout de 5 ou 10secondes, rien du tout !

J'ai même placé un alert tout en haut de mon script, donc des son chargement il devrait pop cet alerte, sauf que non :/

Code :

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

1
2
3
4
5
6
7
8
 
alert('Script chargé');
$(document).ready(function() 
		{  
		 $(".dynamic-edit-class").click(function()  
		  { 
		   if( $(this).attr("contenteditable") == "true") 
		   {

De même, lorsque le script est écris en dur dans une page de test contenant des champs modifiable et tout, sa fonctionne très bien, au clic sur un des champs de ma class dynamic-edit-class mon script s'execute très bien ! C'est juste pour moi un problème d'inclusion, y a quelque chose qui m'échappe, lorsque j'inclus un fichier .js, le code de clui-ci est chargé dans ma page l'incluant ou attend-il un évènement (ici un clic sur un élément de cla class 'dynamic-edit-class) pour s'éxecuter ?

**Darkaurora** · 23/11/2014, 17h19

peut tu mettre les codes correspondant au chargement du script ?

**StripMat** · 23/11/2014, 20h14

A vrai dire j'utilise une simple inclusion, comme sa

Code :

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

1
2
3
4
5
 
...
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="styles/js/ModifDynamique.js"></script>
...

Le tout dans ma balise <head>

Je ne sais pas si c'est la bonne méthode, j'apprend sur le tas, j'ai du manquer quelque chose...

EDIT: Mon script en question, c'est ModifDynamique.js

**Darkaurora** · 23/11/2014, 20h49

Peut tu regarder l'ordre des chargements des scripts dans les outils de développements ? Sous chrome tu appuie sur F12 puis c'est dans l'onglet network, il faut toutefois ouvrir la console avant le chargement de ta page. De plus tu pourras constaté si tu as des erreurs JS qui font que ton script ne fonctionne pas.

**StripMat** · 23/11/2014, 20h53

J'ai résolu tout seul mon problème.

Dans mon cas, c'était un simple problème de lien lors de l'inclusion. D'autre part, pour que cela soit utile à d'autres néophytes, une page javascript contenant une fonction anonyme, comme cela

Code :

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

1
2
3
4
5
 
$(document).ready(function() 
		{  
		 $(".dynamic-edit-class").click(function()  
		  { ...

C'est à dire une fonction non nommée qui attend juste une action, ici un clic sur un élément de la classe dynamic-edit-class. Et bien ces fonctions s'éxecutent automatiquement, pas besoins d'appeler le fichier sur un évènement onclick ou autre, du moment que le fichier est inclu entre deux balises <script>, le code est interpreté et attend juste que sa fonction s'active ! Magique.

Corrigez moi si je me trompe, mais dans mon cas c'est ce qu'il se passe, ou du moins ce que j'en déduis ^^

Exécution script externe

jQuery

Vue hybride

Discussions similaires

Partager

Partager