Réinitialisation de variable non souhaitée

**Zebulon777** · 04/02/2015, 11h08

Bonjour tout le monde,

voila j'ai un problème à la noix : un variable globale est remise à 0 alors qu'elle ne devrait pas.

Je m'explique : mes variables globales sont définies et initialisées dans le fichier FonctionsCommunes.js qui est placé dans le <head> comme ça :

Code html :

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

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
<!DOCTYPE HTML><!--Le DOCTYPE pour HTML5-->
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PotAG</title>
<!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />-->
<meta http-equiv="x-ua-compatible" content="IE=8">
 
<style type="text/css">
body {
        font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
        background-color: #7FBFFF;
        margin: 0;
        padding: 0;
        color: #000;
}
</style>
 
<!-- NE PAS MODIFIER L'ORDRE DES LIGNES SUIVANTES -->
<link href="PotAG_FeuilleStyle.css" rel="stylesheet" type="text/css" /> <!-- Feuille de style des Styles de l'applications PotAG -->
<!-- <link href="PotAG_CheckBox.css" rel="stylesheet" type="text/css" /> -->
<link href="PotAG_Table.css" rel="stylesheet" type="text/css" /> <!-- Feuille de style des Styles des TABLES -->
<link href="styles.css" rel="stylesheet" type="text/css" /> <!-- Feuille de style des Styles Globaux -->
 
 
<!-- PERMET DE CHARGER LA LIBRAIRIE A PARTIR DU DISQUE -->
<script CHARSET="utf-8" src="jquery.js"></script>
 
<!-- Fonctions personnelles -->
<script type="text/javascript" src="SCRIPT_FonctionsCommunes.js"></script>
<script type="text/javascript" src="SCRIPT_FonctionsDATESHEURES.js"></script> 
<script type="text/javascript" src="PotAG.js"></script>
 
</head>
 
<body onLoad=Window_onload();>
...
...
...

La variable globale en question est mise à jour dans PotAG.js, je voudrai l'utiliser dans le fichier ".html", mais elle est toujours à 0.
Je ne comprends pas ni arrive à trouver pourquoi.

Ca doit surement être un truc tout bête, mais je suis dessus depuis 2 heures et impossible de trouver une solution.

Je vous mets une partie du code du OnLoad si ça peut vous aider à m'aider...

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function Window_onload() {
	document.body.style.cursor = 'wait';
...
...
...
	InitDate();
 
	CreationPage(G_TERRAIN);// La variable G_NbINPUT est calculée dans cette fonction qui se trouve dans le fichier PotAG.JS
	var WDateSys = DateSysteme();
	window.Form_PotAG.DateID.value = WDateSys;
 
	Chargement_Donnees_Mensuelles();
	if (window.Form_PotAG.C_Email.value == "")
	{
		window.Form_PotAG.C_Email.focus();
	};
	Initialisation_Champs();
	ChargementTableauMois();
alert(G_NbINPUT);// Ici la variable est à 0
	ActiverDesactiverSaisie(true, "OUI");
...
...
...

La fonction dans PotAG.js

Code javascript :

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

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
41
42
43
function CreationPage(P_Terrain) {
	WTaille1 = "25%";
	WTaille2 = "25%";
	WFichier = G_RepXML + G_TERRAIN + ".xml";
	$(document).ready( function(){
		$.ajax( {
			type: "GET",
			url: WFichier,
			dataType: "xml",
			error: function (jqXHR, textStatus, errorThrown) 
			{
				alert("Problème avec le fichier XML, veuillez vérifier le fichier '" + WFichier + "'." + G_CrLf + "Traitement impossible.")
				window.close();
			},
			success: function(xml) 
			{
				$(xml).find('TERRAINS').each(
				function() {  
					var WCode_Terrain = $(this).attr('code_terrain');
					var WNom_Terrain = $(this).attr('nom_terrain');
					G_NOM_TERRAIN = WNom_Terrain;
					// Application de la classe pour le nom de l'aérodrome.	
					var ObjTerrain = document.getElementById("Cell_Terrain");
					ObjTerrain.className = "Effet3D1 CadreRelief2";
					WNomImage = "./Images/" + G_TERRAIN + ".png"
					Cell_Terrain.innerHTML = "<img src='" + WNomImage + "'/>";
				})
				var WIndex = 1;
				var WIndexTab = 0;
				$(xml).find('SECTIONS').find('SECTION').each(
				function() {  
...
...
...
							G_NbINPUT = G_NbINPUT + 1;
							}
...
...
...							
			}
...
...
...

Voila, j'espère vous avoir donné assez de billes pour que vous puissiez m'aider.

**Bovino** · 04/02/2015, 11h20

Un classique AJAX : utiliser les données au bon moment !

**Zebulon777** · 04/02/2015, 12h38

Super, j'ai tout compris, enfin, je crois et j'espère...

Mais par contre, je ne vois pas comment solutionner mon problème.
Comment faire pour que la procédure s'arrête et attende ?

**Zebulon777** · 04/02/2015, 12h53

HA YES de chez YES, je crois que j'ai trouvé.
En fait, il suffit d'ajouter : async:false

Donc ça donne :

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
16
17
18
19
20
...
...
...
$(document).ready( function(){
	$.ajax( {
		type: "GET",
		url: WFichier,
		async: false,
		dataType: "xml",
		error: function (jqXHR, textStatus, errorThrown) 
		{
			alert("Problème avec le fichier XML, veuillez vérifier le fichier '" + WFichier + "'." + G_CrLf + "Traitement impossible.")
			window.close();
		},
		success: function(xml) 
		{
...
...
...

Est-ce que tu me confirmes que c'est bon ?

**SpaceFrog** · 04/02/2015, 13h12

heu et le success alors ?

**Zebulon777** · 04/02/2015, 13h24

Heu... Comprends pas...
Qu'est-ce qu'il a à voir la dedans ?
C'est toute la fonction qui passe en synchrone, non ? Et cela quelque soit le résultat "error" ou "succes" ?

Si ce n'est pas le cas, ça dépasse largement mes compétences et donc au secours !

**SpaceFrog** · 04/02/2015, 13h26

Non l'idée est d'utiliser les variables uniquement lorsqu'elle sont disponibles chronologiquement parlant.
Dans le cas de l'ajax de jquery c'est DANS le success

**Zebulon777** · 04/02/2015, 13h27

Ha, donc si j'ai bien compris, il faut que je mettre async:false dans la partie success ?

**SpaceFrog** · 04/02/2015, 13h31

non oublie ton histoire d'async ...

utilise les variable dans le success point barre

**Zebulon777** · 04/02/2015, 13h36

Bah, c'est ce que je fais, mais si j'enlève le async, la variable G_NbINPUT est à 0 dans le HTML, alors qu'en le laissant, c'est tout bon.

Donc, c'est vrai que j'ai résolu mon problème, je peux donc avancer, mais par contre, je voudrai bien comprendre cette histoire ?

**SpaceFrog** · 04/02/2015, 15h35

Code :

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

1
2
3
4
5
success: function(xml) 
		{
                   //  ICI TES VARIABLES SONT RENSEIGNEES !!!!!!
                   // tu peux donc les utiliser à loisir ...
}

**Bovino** · 04/02/2015, 15h39

Envoyé par Billet blog donné en lien

C'est pourquoi tous les traitements se basant sur la réponse du serveur doivent être traités dans le callback de la requête.

**Zebulon777** · 05/02/2015, 09h58

Envoyé par SpaceFrog

Code :

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

1
2
3
4
5
success: function(xml) 
		{
                   //  ICI TES VARIABLES SONT RENSEIGNEES !!!!!!
                   // tu peux donc les utiliser à loisir ...
}

Oui, j'avais bien compris ça, mais c'est bien ce que je fais, mais quand le programme redonne la main au Window_OnLoad du fichier HTML, la fameuse variable en question a perdu sa valeur calculée justement dans le success.

@Bovino : je pense que c'est bien ce que je fais dans mes procédures, ou alors, je n'arrive pas à comprendre le principe du CallBack ? Ce que vous appelez Callback, c'est bien le résultat retourné par une fonction ?

**SpaceFrog** · 05/02/2015, 10h10

le callback est une fonction qui s'exécute après

si tes variable ne sont pas bonnes dans le success (callback) c'est que le retour que tu reçois n'est pas bon

**Zebulon777** · 05/02/2015, 13h21

Justement, c'est là que je m'étonne, tout est bon dans le success, j'ai bien tout vérifier, mais c'est en sortant que les valeurs des variables sont perdues.

Par contre, je viens de penser à un truc que je n'ai pas encore eu le temps de tester : je défini toutes mes variables globales dans un fichier JS en tout début, avant les premiers scripts, mais est-ce qu'il ne faudrait pas les mettre dans le HTML ??? Et si oui, où dois-je les placer ?

**SpaceFrog** · 05/02/2015, 13h43

mais c'est en sortant

Je pense que la confusion se trouve là !

en dehors du success tu n'es plus dans la chronologie !
tu peux inviquer des fonction dans le success de sorte a ce que le code soit interprété au bon moment.

Mais en dehors du success tu n'est pas dans le callback et tu n'as aucune garantie que ton code soit interprété chronologiquement après le callback.
Seule la "zone dans le success" ou error te garantit que tu as reçu le réponse du serveur

**Zebulon777** · 05/02/2015, 14h54

Ha bah voila, mais il faut absolument que je passe des valeurs en dehors du success ; la seule chose que j'ai donc modifié (trouvé) est d'ajouter async:false et là tout fonctionne, les valeurs sont bien passées en dehors du success.

**SpaceFrog** · 05/02/2015, 15h18

Non ta compréhension est biaisée ...

je ne vois pas ce qui t’empêches de mettre ton code DANS le success ce qui serait la bonne pratique.

là tu bloques l'execution du reste du script jusqu'à la fin de l'ajax...
du coup le code qui est "après" ton ajax a attendu la fin de l'ajax

Mais ce serait exactement la même chose si tu déplaçait le code dans le callback (success)

**danielhagnoul** · 06/02/2015, 01h02

AJAX est et doit rester asynchrone.

Si vous voulez absolument utiliser une variable en dehors de la transaction AJAX, alors que cette variable est modifiée dans le "success" (obsolète), c'est possible.

Exemple avec un code AJAX non obsolète.

Fichier data.js

Code JavaScript :

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

GTest = 0;

Fichier ajax.js

Code JavaScript :

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

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
function getXML( callback ){
    var clb = callback || function( ){ },
        jqXHR = $.get( "monFichier.xml" );
 
    setTimeout( function(){
        // Si l'objet différé existe dans l'état "attendre", 
        // alors exécute la méthode fail()
 
        if ( jqXHR && jqXHR.state() === "pending" ){
            jqXHR.abort();
        }
    }, 3000 ); // 3s
 
    jqXHR.done( function( data, textStatus, jqXHR ){
        // succès de la transaction, on doit traiter le contenu de data
        console.log( data, textStatus, jqXHR );
 
        GTest = 42;
    });
 
    jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
        // échec de la transaction, gérer la catastrophe
        console.log( jqXHR, textStatus, errorThrown );
 
        GTest = -1;
    });
 
    jqXHR.always( function( jqXHR, textStatus ){
        // la transaction est terminée
        // nettoyage
        // exécution d'un code dépendant
        console.log( jqXHR, textStatus );
 
        clb( );
    });
}

Fichier test.html

Code HTML :

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

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
41
<!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>Page de test, version 2.2.0</title>
    <style>
 
    </style>
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="data.js"></script>
    <script src="ajax.js"></script>
    <script>
        "use strict";        
 
$( function(){ // forme abrégée de $(document).ready(function(
 
    console.log( "1) GTest = ", GTest );
    
    // autre codes
    
    getXML( getValueOfGTest );
    
    // code utilisant GTest modifié
    function getValueOfGTest( ){
        console.log( "3) GTest = ", GTest );
    }
    
    // cette ligne s'éxécute avant la fin de getXML()
    console.log( "2) GTest = ", GTest );
 
});
 
    </script>
</head>
<body>
 
</body>
</html>

**Zebulon777** · 18/02/2015, 15h31

J'ai bien compris mais je me vois mal refaire ce que j'ai déjà fait et qui fonctionne impec, même si ce n'est pas "bien".

Réinitialisation de variable non souhaitée

JavaScript

Discussions similaires

Partager

Partager