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