Discussion :

[phramusca]

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 :

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

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

[phramusca]

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;

[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.

[phramusca]

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 :

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

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();
}

[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 :

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

dataKeep=data;

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

Code :

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

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

[phramusca]

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 :

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
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();
}

[phramusca]

Code :

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

<SELECT NAME="indexMedia" class='form_element' onChange="SubmitNavigation()">

[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 :

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

1
2
3
4
5
6
function initPage() {
    initCascadeList();
    SubmitNavigation();
    dataKeep = new Object;
    dataKeep=clone(data);
}

[phramusca]

Merci Bovino