[Javascript/AJAX] Chargement, Synchronisation et informations perdues
Bonsoir,
Je vais essayer d'être le plus simple possible.
Je range des informations dans une bdd selon cette hiérarchie :
catégories > questions appartenant à une catégorie > réponses appartenant à une question
Je veux afficher ces informations au chargement de ma page avec des fonctions javascript et ajax.
Il y a donc trois fonctions d'affichage, une pour chaque niveau de la hiérarchie ci-dessus, et la fonction d'un niveau "parent" appelle donc celle du niveau "enfant", ce qui revient au final à trois boucle imbriquées.
J'ai besoin d'utiliser de telles fonctions car j'aimerais pouvoir ajouter une nouvelle catégorie, ou une nouvelle question en réutilisant ces fonctions d'affichage.
Bref, voici maintenant mon problème : quand je veux afficher deux catégories, rien ne se passe comme prévu, et ça change à chaque fois que j'actualise la page (catégorie et questions manquantes, et même question dans mauvaise catégorie...).
J'ai essayé d'ajouter des variables booléennes pour éviter qu'une fonction ne soit active plus d'une fois en même temps, et tout s'affiche correctement, par contre comme j'utilise une boucle en attendant que la fonction demandée soit libre, le chargement de la page est devenu interminable.
Voici le code si ça peut aider (makin_grp et makin_field sont les variables d'état d'utilisation des fonctions, que j'aimerais retirer !!) :
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
| makin_grp = false;
makin_field = false;
function disp_grp(id_grp)
{
while (makin_grp)
{
}
makin_grp = true;
var liste = document.getElementById('grp_list');
if(XHR && XHR.readyState != 0)
{
XHR.abort();
delete XHR;
}
XHR = getXMLHTTP();
if(!XHR)
{
return false;
}
XHR.open("GET", "disp_grp.php?id_grp=" + id_grp, true);
XHR.onreadystatechange = function()
{
if (XHR.readyState == 4)
{
if(!XHR.responseXML)
{
return false;
}
else
{
var docXML= XHR.responseXML;
var titre = docXML.getElementsByTagName("titre").item(0).firstChild.data;
liste.innerHTML += '<div class="categorie">CATEGORIE : <b>' + titre + '</b><a class="delete_cat" href=""> Supprimer</a></div><div id="grp_' + id_grp + '"></div><div class="tbl_field"><a href="" class="ajouter"><img src="images/add1.gif" class="add" />Ajouter une question à cette catégorie </a></div>';
var fields = docXML.getElementsByTagName("field");
for (i=0;i<fields.length;i++)
{
disp_field(id_grp, fields.item(i).firstChild.data);
makin_grp = false;
}
}
}
}
XHR.send(null);
}
function disp_field(id_grp, id_field)
{
while (makin_field)
{
}
makin_field = true;
var field_list = document.getElementById('grp_' + id_grp);
if(XHR && XHR.readyState != 0)
{
XHR.abort();
delete XHR;
}
XHR = getXMLHTTP();
if(!XHR)
{
return false;
}
XHR.open("GET", "disp_field.php?id_field=" + id_field, true);
XHR.onreadystatechange = function()
{
if (XHR.readyState == 4)
{
if(!XHR.responseXML)
{
return false;
}
else
{
var docXML= XHR.responseXML;
var label = docXML.getElementsByTagName("label").item(0).firstChild.data;
field_list.innerHTML += '<div class="tbl_field" id="' + id_field + '"><span id="field_' + id_field + '" style="font-weight:bold;">' + label + '</span> <a href="javascript:;" onclick="inlineMod(' + id_field + ', document.getElementById(\'field_' + id_field + '\'), \'label\', \'Texte\')"><img src="images/b_edit.png" border="0" alt="renommer" title="renommer" /></a><div class="tool_box"><a href="javascript:;" onclick="edit_field(' + id_field + ')">Editer</a> | <a href=""> Supprimer</a></div><div id="props_' + id_field + '" class="listof"><div id="list_' + id_field + '"></div>+ <a href="javascript:;" onclick="add_prop(' + id_field + ')" class="new_prop">Nouvelle proposition</a><div class="hide_field"><a href="javascript:;" onclick="hide_field(' + id_field + ')">Masquer le mode d\'édition</a></div></div></div>';
var propositions = docXML.getElementsByTagName("proposition");
for (i=0;i<propositions.length;i++)
{
//disp_prop(id_grp, fields.item(i).firstChild.data);
}
makin_field = false;
}
}
}
XHR.send(null);
} |
disp_group affiche les catégories, disp_field les questions, et disp_prop (manquante) les réponses.
Comme vous pouvez voir j'utilise la propriété innerHTML pour plus de facilité, mais je me demande si le problème ne vient pas de là.
J'espère avoir été le plus clair possible !
Merci pour votre aide,
A bientôt.
