Exécution script externe

Version imprimable

23/11/2014, 16h09
StripMat

Exécution script externe
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:

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 !
23/11/2014, 16h33
Darkaurora

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.
23/11/2014, 16h38
StripMat
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:

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 ?
23/11/2014, 17h19
Darkaurora

peut tu mettre les codes correspondant au chargement du script ?
23/11/2014, 20h14
StripMat
A vrai dire j'utilise une simple inclusion, comme sa
Code:

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
23/11/2014, 20h49
Darkaurora

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.
23/11/2014, 20h53
StripMat
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:

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 ^^
23/11/2014, 22h25
Darkaurora

ces fonctions anonymes sont un peu moins magiques que ça :)
il s'agit de fonction de callback, concrètement les méthodes ready & click peuvent avoir comme argument une fonction, cette fonction sera exécutée lorsque le gestionnaire aura gérer l'événement.

Finalement j'ai rien résolu du tout !

J'ai éssayé plein de combinaisons, d'appeler ma fonction sur mon js externe depuis différents évènements, de modifier ma fonction, je ne trouve pas ce qui fonctionne, un coup la modification fonctionne, l'autre coup d'apres sa fonctionne plus, dès fois un champ sur deux est modifié, ...
Là, je sèche !
Voici ma page html avec un léger formulaire, sur lequel je fais mes test

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
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<script src="styles/js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="/svn/trunk/TPUSEP/styles/js/ModifDynamique.js"></script>
 
 
 </head> 
 
<h2>Inscriptions des élèves au cross USEP 2015</h2>
		<h3>Pour une école non membre de l'USEP</h3>
		<input type="hidden" id="cpt" value="1">
 
			<div id="insceleve">
<div class="test" id="1">
				<fieldset class='InfoEleve' >
					<label for='nom'>Nom de l'élève  </label><input class="dynamic-edit-class" contenteditable='true' type='text' name='nom' id='nom' onchange="test()" onblur="test()" onfocus="test()">
					<label for='telephone'>Date de naissance  </label><input class="dynamic-edit-class" contenteditable='true' type='text' name='telephone' onchange="test()" onblur="test()" onfocus="test()" id='telephone'>
 
					<input type='checkbox' name='certificat' id='certificat' /> <label for='certificat'>Certificat d'apptitude</label>
					<input type='checkbox' name='autorisationP' id='autorisationP' /> <label for='autorisationP'>Autorisation parentale</label>
				</fieldset>
</div>
			</div>
 
 
 
 
 </body> 
 
</html>

Voici ici mon js externe, contenant le traitement

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
function test()
{
	alert('1');
	$(document).ready(function() 
	{  
		$(".dynamic-edit-class").click(function()  
		{ 
			alert('2');
			if( $(this).attr("contenteditable") == "true") 
			{    
 
				var contenu_avant = $(this).attr('value');
				var id_bdd = $(this).closest('div').attr('id');
				var champ_bdd = $(this).attr("name"); 
				//alert("contenu avant = " + contenu_avant); 
				alert(id_bdd);      
				$(this).blur(function() 
				{ 
					var contenu_apres = $(this).attr('value');
					if (contenu_avant != contenu_apres) 
					{ 
						parametre='id='+id_bdd+'&champ='+champ_bdd+'&contenu='+contenu_apres ; 
						//alert(param) ; 
						$.ajax(
						{ 
							url: "/svn/trunk/TPUSEP/TestModificationDynamiques/updatedynamique.php",  
							type: "POST",  
							data: parametre,  
							success: function(html)
							{  
								// alert(html); 
							} 
						}); 
					} 
				}); 
 
			}; 
		};
	};
}

et voici, pour compléter, un fichier php permettant l'échange avec mysql.

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
<?php  
// 14-01-2014 
// $_POST[id]   contient l'id de la base de données 
// $_POST[champ]  contient le nom du champ à modifier 
// $_POST[contenu] contient la nouvelle valeur du champ 
// la base de données s'appelle 'Agenda' et contient 1 table 'repertoire' contenant 2 champs 'nom' et 'telephone'  
 
  $id=($_POST["id"]);  
  $champ=($_POST["champ"]);  
  $contenu=($_POST["contenu"]);  
  $BDD="database"; 
  $table="nomtable";  
  print_r($champs);
  print_r($id);
  print_r($contenu);
  // accès BDD et UPDATE 
  // le code ci-dessous est mis en commentaire, le stockage dans un fichier servira de simulation. 
   $link=mysql_connect("host", "login", "password") or die(mysql_error()); 
   mysql_select_db($BDD); 
   mysql_query("SET NAMES 'utf8'");  
 
   $sql = "UPDATE $table SET `$champ`='$contenu' WHERE id=$id "; 
  	mysql_query($sql) or die(mysql_error());  
 	mysql_close($link); 
 
 	echo "success"; 
  // fin accès à la base de données 
 
  // début de simulation -> écriture dans le fichier 'simulation.txt' 
  /*$trace = "id= ".  $id. " champ= ".  $champ . "  contenu= " . $contenu."\n"; 
  $monfichier = fopen("simulation.txt", "a+"); 
  fputs($monfichier, $trace); 
  fclose($monfichier); */
?>

Le but final est qu'au chargement du formulaire, les champs se remplissent avec les info issue de la base de donnée et qu'ensuite on puisse les modifier à la volée, en switchant de champs avec TAB ou à la souris, je veux que chaque changement de value soit aussitot porté en base de donnée.

23/11/2014, 22h36
StripMat

Ho que non, s'aurait été trop beau ^^

Néamoins je galère à trouver la bonne combinaison entre ma fonction javascript et ses conditions de déclanchement et sur quel évènement placer cette fonction sur les champs de mon formulaire !

Peut etre existe-il quelque chose comme les listener ? une fonction qui reste passive tant qu'un champ n'a été modifié ? J'suis à court d'idée !
Merci encore de ton aide Darkaurora ^^

Bonsoir

Il suffit logiquement d'inclure dans votre page web le fichier JS contenant le code (corrigé) ci-dessous avec un banal <script src="monFichier.js"></script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$( function(){
 
    /*
     * Code dynamique, on() avec deux sélecteurs
     */
    $( "body" ).on( "click", ".dynamic-edit-class", function(){
 
        /*
         * Propriété du DOM, retourne true ou false
         * Voir : http://api.jquery.com/prop/
         */
        if ( $( this ).prop( "contenteditable" ) ){
 
            // votre code
        }
    });
 
});

:faq: FAQ jQuery Différences entre on() avec 1 ou 2 sélecteurs

24/11/2014, 20h52
StripMat

Merci beaucoup pour votre aide,

J'ai corrigé mon code mais il y reste quelque chose que je ne comprend pas. Mon fichier js contient une fonction qui est sensé s'activer au moment d'un click sur un objet d'une certaine classe, seulement, sa semble ne pas fonctionner :/

J'ai placé un alert, et je ne rentre même pas dans la fonction. Dois-je tout encapsuler dans une fonction nommée et l'appeler depuis mon html sur un onfocus ? Je préfererai pas :/

:calim2:

Copier-coller ci-dessous, tester avec un clic dans la division éditable et une alerte il y aura.

Code du fichier monCode.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$( function(){
 
   /*
    * Code dynamique, on() avec deux sélecteurs
    */
   $( "body" ).on( "click", ".dynamic-edit-class", function(){
 
       /*
        * Propriété du DOM, retourne true ou false
        * Voir : <a href="http://api.jquery.com/prop/" target="_blank">http://api.jquery.com/prop/</a>
        */
       if ( $( this ).prop( "contenteditable" ) ){
 
           // votre code
 
           alert( "Mais si je fonctionne !");
       }
   });
 
});

Code de la page web :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta http-equiv="cache-control" content="public, max-age=60">
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta name="author" content="Daniel Hagnoul">
    <title>Test</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="monCode.js"></script>
    <style>
        .dynamic-edit-class { margin: 12px; padding: 6px; width: 200px; height: 100px; border: 1px solid black; }
    </style>
</head>
<body>
 
<div class="dynamic-edit-class" contenteditable>Hello</div>
 
</body>
</html>

25/11/2014, 12h35
StripMat

Merci pour votre aide, maintenant sa fonctionne, j'avais des erreurs de code, le votre a toujours fonctionné :mrgreen: