affectation de variables

Version imprimable

Bonjour,

J'ai un problème que je n'arrive pas à comprendre, j'espère que quelqu'un pourra m'aider ou au moins m'orienter:
Je fait une affectation de variable en Javascript (un tableau - rempli - dans un autre - vide) qui ne marche que lorsque je fait un point d'arrêt avec Firebug. Si je ne fait pas de point d'arrêt, le script me dit que la variable dataKeep "is undefined".
Code:

1 2 3 4 5 6 7 8 9 var data=new array(); var dataKeep=new array(); function initPage() { initCascadeList(); SubmitNavigation(); //TODO: debug: l'affectation qui suit ne marche que avec un point d'arret dans Firebug !!!??? Pourquoi ??? dataKeep=data; }
La fonction SubmitNavigation() appelle une autre (SendUsingAjaxJson() ) qui fait (entre autre) l'affectation de data avec un appel AJAX au format JSON:
data= eval('('+ xmlhttp.responseText +')');

Au départ data était déclarée sans var (donc globales) dans SendUsingAjaxJson() et dataKeep de même dans initPage()

J'ai ensuite essayé de les déclarer en globales, avec var, hors des fonctions avec:
var data=null; ou var data=new array() - voir exemple ci-dessus - mais le résultat ne change pas.

Merci de vos retours :)

14/11/2010, 13h22
phramusca

data et keepData sont des objets, pas des tableaux

Bon, en fait, data et keepData ne sont pas des tableaux, mais des objets. Cela dit, en les déclarant comme tel, ça ne marche pas mieux ;(

var data = new Object;
var dataKeep = new Object;
14/11/2010, 13h27
Bovino

Si tu remplis ton objet via une requête AJAX, il faut laisser le temps à cette requête de se terminer.
Il faut soit la passer en mode asynchrone, soit gérer le traitement dans le callback.

Merci pour cette réponse. Je débute en AJAX et JSON, donc je ne comprend pas bien celle-ci. Est-ce que ma fonction pour récupérer mon objet JSON est asynchrone ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function SendUsingAjaxJson(myURL) {
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
           data= eval('('+ xmlhttp.responseText +')');
        }
    }
    xmlhttp.open("GET",myURL,true);
    xmlhttp.send();
}

14/11/2010, 13h58
Bovino
Oui, ta requête est asynchrone.
Ceci dit, conceptuellement, ton code n'a pas vraiment d'intérêt.
Si j'en crois tes noms, dataKeep te sert à conserver les valeurs initiales de l'objet.
Or en faisant

Code:

dataKeep=data;

tu affectes à dataKeep une référence à data, donc les deux évolueront en même temps...
Autant faire
Code:

1 2 3 4 if (xmlhttp.readyState==4 && xmlhttp.status==200) { data= eval('('+ xmlhttp.responseText +')'); dataKeep= eval('('+ xmlhttp.responseText +')'); }

En fait, je voudrais garder effectivement une copie de data au chargement de la page (initPage étant appelé avec window.onload) dans keepData, et NON une référence.

ensuite, à chaque appel de SendUsingAjaxJson(), je veux le faire évoluer ou non, en fonction de checkboxes selected ou non.

J'ai un peu simplifié mon code dans mes posts précédents. Voici le vrai code complet (avec mes différents essais commentés):

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
//TODO: Faire une classe plus générique avec form_submit.js
 
String.prototype.startsWith = function(str)
{return (this.match("^"+str)==str)}
 
//var data = new array();
//var dataKeep = new array();
//var data = new Object;
//var dataKeep = new Object;
//var dataRaw;
 
function initPage() {
    initCascadeList();
    SubmitNavigation();
    //TODO: debug: l'affectation qui suit ne marche que avec un point d'arret dans Firebug !!!??? Pourquoi ???
//    dataRaw=xmlhttp.responseText;
//    dataKeep= eval('('+ dataRaw +')');
//    dataKeep = new Object;
    dataKeep=data;
}
 
function SendUsingAjaxJson(myURL) {
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
           dataRaw=xmlhttp.responseText;
           data= eval('('+ xmlhttp.responseText +')');
           for(var key in data) {
                if(key=="url") {
                    document.getElementById("thumbnail").src=data[key];
                }
                else {
                    if(document.forms['medias_modifier'][key+"Keep"]) {
                        if(document.forms['medias_modifier'][key+"Keep"].checked) {
                            //If the keep checkbox exists and is checked, then we store the kept data
                            dataKeep[key] = document.forms['medias_modifier'][key].value;
                        }
                        else {
                            //If the keep checkbox exists and is NOT checked, then we display retrieved data
                            document.forms['medias_modifier'][key].value = data[key];
                        }
                    }
                    else {
                        //If no check feature (keep checkbox does NOT exist), then we display retrieved data
                        document.forms['medias_modifier'][key].value = data[key];
                    }
                    if(key.startsWith('lieux_lev')) {
                        //If it is a cascadeList, then we call the onchange method
                        document.forms['medias_modifier'][key].onchange();
                    }
                }
            }
        }
    }
    xmlhttp.open("GET",myURL,true);
    xmlhttp.send();
}
 
function SubmitNavigation() {
    document.getElementById("FormResult").innerHTML="";
    var currentIndex=document.forms['navForm'].indexMedia.selectedIndex;
    //TODO: Rendre la liste ci_dessous (mediaList) dynamique !!!
    SendUsingAjaxJson('medias_json.php?liste=mediaList&indexMedia='+currentIndex);
}
 
function NavigateTo (action) {
 
    var currentIndex=document.forms['navForm'].indexMedia.selectedIndex;
    var nbOfIndex=document.forms['navForm'].indexMedia.length;
    var newIndex=0;
 
    switch(action) {
        case "Next":
            if ((currentIndex+1)>(nbOfIndex-1)) {newIndex=0;} else{newIndex=currentIndex+1;}
            break;
        case "Previous":
            if ((currentIndex-1)<0) {newIndex=nbOfIndex-1;} else{newIndex=currentIndex-1;}
            break;
        case "First":
            newIndex=0;
            break;
        case "Last":
            newIndex=nbOfIndex-1;
            break;
    }
    document.forms['navForm'].indexMedia.selectedIndex=newIndex;
    document.forms['navForm'].indexMedia.onchange();
}

14/11/2010, 15h06
phramusca

Code:

<SELECT NAME="indexMedia" class='form_element' onChange="SubmitNavigation()">
14/11/2010, 18h18
phramusca
J'ai réussi à résoudre mon problème grâce à ton aide. Effectivement, en utilisant le =, je créai un pointeur vers l'objet initial. En le clonant à la place, cela marche beaucoup mieux.
Cloner un objet Javascript

Ce que je ne comprend pas par contre, c'est pourquoi le fait de faire un point d'arrêt avec Firebug sur l'affectation me permettait de faire tourner le script comme je le voulais.
Code:

1 2 3 4 5 6 function initPage() { initCascadeList(); SubmitNavigation(); dataKeep = new Object; dataKeep=clone(data); }
14/11/2010, 18h18
phramusca

Merci Bovino :)