[AJAX] innerHTML ne modifie rien

**dubitoph** · 12/03/2010, 10h14

Bonjour,

Via une fonction AJAX dans un projet intranet, je peux faire un update dans ma base de données qui peut être extrêmement long. Dès lors, je veux afficher un message pour prévenir l'utilisateur via un innerHTML. Cependant, le message ne s'affiche pas.

Voici ma fonction :

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
function modifCampagne()
 {
  document.getElementById('erreur').innerHTML = "<font color='red'>Enregistrement en cours. Veuillez patienter, cette opération peut durer plusieurs minutes...</font>";
 
  if(verifDates(1))
   {
    xhrModifCampagne=getXhr();
 
    xhrModifCampagne.onreadystatechange = function()
     {
      if(xhrModifCampagne.readyState == 4 && xhrModifCampagne.status == 200)
       document.getElementById('erreur').innerHTML = xhrModifCampagne.responseText;
     }
 
    xhrModifCampagne.open("POST",'../transferts/modifCampagne.php',true);
 
    xhrModifCampagne.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
    var accroche = document.getElementById('accroche').value;
    var dateDebut = document.getElementById('dateDebut').value;
    var dateFin = document.getElementById('dateFin').value;
    if(document.getElementById('campRdv').checked == true)
     var campRdv = 1;
    else
     var campRdv = 0;
 
    var fichier = trim(self.frames['frameInsertFichier'].document.forms['ajoutFichier'].fichierCibles.value);
 
    if(dateDebut == 'jj/mm/aaaa')
     dateDebut = '';
 
    if(dateFin == 'jj/mm/aaaa')
     dateFin = '';
 
    xhrModifCampagne.send("accroche=" + accroche + "&dateDebut=" + dateDebut + "&dateFin=" + dateFin + "&fichier=" + fichier + "&campRdv=" + campRdv);
   }
 }

Ce qui est étonnant, c'est que le retour du script Php est bien affiché (xhrModifCampagne.responseText) mais pas le message que je veux afficher en première intention.

Quelqu'un aurait une idée?

Merci d'avance

**E.Bzz** · 12/03/2010, 10h28

Bonjour,
effectivement en asynchrone le problème ne devrait pas se poser

Pour tester : est-ce que ça fonctionne si tu ne laisses que cette ligne dans la fonction ?

Sinon, profites-en pour virer la balise <font> : elle est obsolète.
Utilise plutôt un span, le résultat est le même mais ton code sera valide

A+

**E.Bzz** · 12/03/2010, 10h30

Même pas besoin de balise supplémentaire en fait :

Code :

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

1
2
document.getElementById('erreur').style.color = 'red';
document.getElementById('erreur').innerHTML = "Enregistrement en cours. Veuillez patienter, cette opération peut durer plusieurs minutes...";

serait plus "propre"

A+

**dubitoph** · 12/03/2010, 10h32

Bonjour et merci pour ton intervention rapide...

Je viens de commenter toutes les lignes sauf l'incriminée, et ça ne fonctionne pas.

**E.Bzz** · 12/03/2010, 10h35

OK.

On peut voir le code HTML généré associé à tout ça ?

A+

**dubitoph** · 12/03/2010, 10h43

Bien volontier...

Malheureusement, je ne peux le faire maintenant car le proxy de l'endroit où je me trouve m'empêche d'installer les modules complémentaires pour ff (webdevelopper). J'avais eu tout juste le temps d'installer Firebug, puis plus rien...

**E.Bzz** · 12/03/2010, 10h45

Si avant ce traitement le contenu de la page n'a pas déjà été modifié par Ajax, un click droit + "Code source de la page" devrait suffire ...
Sinon, c'est une piste (l'appel Ajax précédent)

A+

**dubitoph** · 12/03/2010, 10h50

Je me suis débrouillé avec Firebug en déployant toutes les sous branches de la branche body qu'on retrouve dans l'onglet HTML, mais aucune indentation n'est reprise :

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
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
154
155
156
157
158
<body onload="document.forms[0].elements[0].focus();" oncontextmenu="return false" onclick="if(document.getElementById('erreur')) document.getElementById('erreur').innerHTML = '';">
<div id="logo">
<img border="0" align="middle" width="30%" alt="logo téléphone" heigt="30%" src="../images/telephone.jpg"/>
</div>
<div id="titre">Modifier campagne</div>
<div id="menu">
<table id="tmenu">
<tbody>
<tr>
<td>
<input type="button" onclick="deconnection();" value="Se déconnecter"/>
</td>
</tr>
<tr id="trmenu">
<td id="tdmenu">
</td>
</tr>
<tr id="trmenu">
<td id="tdmenu">
<a href="javascript:detruireSession('../interfaces/interface.php?fichier=../fichiersInclusion/listeCampagnes.inc&titre=Liste des campagnes')">Campagnes</a>
</td>
</tr>
<tr id="trmenu">
<td id="tdmenu">
</td>
</tr>
<tr id="trmenu">
<td id="tdmenu">
<a href="javascript:detruireSession('../interfaces/interface.php?fichier=../fichiersInclusion/rechUtilisateur.inc&titre=Modifier données utilisateur')">Modifier utilisateur</a>
</td>
</tr>
<tr id="trmenu">
<td id="tdmenu">
<a href="javascript:detruireSession('../interfaces/interface.php?fichier=../fichiersInclusion/enregCible.inc&titre=Enregistrer client')">Enregistrer client</a>
</td>
</tr>
<tr id="trmenu">
<td id="tdmenu">
<a href="javascript:detruireSession('../interfaces/interface.php?fichier=../fichiersInclusion/rechCible.inc&titre=Modifier client')">Modifier client</a>
</td>
</tr>
<tr id="trmenu">
<td id="tdmenu">
<a href="javascript:detruireSession('../interfaces/interface.php?fichier=../fichiersInclusion/creatForm/page2.inc&titre=Créer campagne')">Créer campagne</a>
</td>
</tr>
<tr id="trmenu">
<td id="tdmenu">
<a href="javascript:detruireSession('../interfaces/interface.php?fichier=../fichiersInclusion/listeRapports.inc&titre=Rapports')">Rapports</a>
</td>
</tr>
<tr id="trmenu">
<td id="tdmenu">
<a href="javascript:detruireSession('../interfaces/interface.php?fichier=../fichiersInclusion/paramGeneraux.inc&titre=Paramètres généraux')">Paramètres généraux</a>
</td>
</tr>
<tr id="trmenu">
<td id="tdmenu">
<a href="javascript:detruireSession('../interfaces/interface.php?fichier=../fichiersInclusion/parametres.inc&titre=Structure xls')">Structure xls</a>
</td>
</tr>
<tr id="trmenu">
<td id="tdmenu">
<a href="javascript:detruireSession('../interfaces/interface.php?fichier=../fichiersInclusion/changePassword.inc&titre=Modifier mot de passe')">Modifier mot de passe</a>
</td>
</tr>
<tr id="trmenu">
<td id="tdmenu">
<a href="javascript:detruireSession('../interfaces/interface.php?fichier=../fichiersInclusion/sauvegarde.inc&titre=Sauvegarde')">Sauvegarde</a>
</td>
</tr>
</tbody>
</table>
</div>
<div id="contenu">
<div id="erreur" align="center"/>
<div id="divLstCamp">
<p class="contenu"/>
<p class="contenu">
Campagne en cours :
<select id="listeCampagnes" onchange="affDonneesCampagne();" name="listeCampagnes">
</select>
<input id="prochainesCampagnes" type="checkbox" onchange="selectCampagnes('prochaines');"/>
Sélectionner les prochaines campagnes
<input id="toutesCampagnes" type="checkbox" onchange="selectCampagnes('toutes');"/>
Sélectionner toutes les campagnes
</p>
</div>
<div id="divInfosCampagne">
<table height="280" cellspacing="0" cellpadding="0" border="0" align="center" width="602">
<tbody>
<tr>
<td align="left" valign="top">
<br/>
<form id="h3sForm" enctype="multipart/form-data" action="" method="post" name="modifCamp">
<fieldset>
<fieldset class="radio">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td colspan="2">
Accroche :
<br/>
<textarea id="accroche" style="width: 100%;" rows="" cols="" name="accroche">Bonjour Sophie/Sandrine/Murielle de la société One-Télécom, partenaire du groupe Belgacom-Proximus. Puis-je parler à Mr/Mme...... ou à la personne responsable du paiement des télécommunications ? Notre société est spécialisée dans les services télécom et nous globalisons tous les services offerts par Belgacom et proximus tels que les lignes fixes, les centraux téléphoniques, les GSM, internet et Belgacom TV). Un de nos commerciaux pourrait-il venir vous rendre visite et prendre une petite demi-heure de votre temps afin de parcourir les services utilisés, parcourir vos factures et vous proposer des services moins chers ou plus efficaces. C’est une demi-heure qui vous fera faire de réelles économies.</textarea>
</td>
</tr>
<tr>
<td width="50%">
Date de début :
<br/>
<input id="dateDebut" type="text" onfocus="select();" maxlength="10" size="10" value="30/11/2009" name="dateDebut"/>
</td>
<td width="50%">
Date de fin :
<br/>
<input id="dateFin" type="text" onfocus="select();" maxlength="10" size="10" value="30/11/2099" name="dateFin"/>
</td>
</tr>
<iframe id="frameInsertFichier" frameborder="0" src="../fichiersInclusion/insertAjoutFichierCibles.html" name="frameInsertFichier">
<html>
<head/>
<body/>
</html>
</iframe>
<tr>
<td colspan="2">
Campagne de prise de rendez-vous
<br/>
<input id="campRdv" type="checkbox" checked="" name="campRdv"/>
</td>
</tr>
<tr>
<td colspan="2">
<br/>
<br/>
<input type="button" onclick="if(trim(self.frames['frameInsertFichier'].document.forms['ajoutFichier'].fichierCibles.value) != '') self.frames['frameInsertFichier'].document.forms['ajoutFichier'].submit(); modifCampagne();" value="Enregistrer"/>
<br/>
<br/>
<div id="erreur" align="center"> </div>
</td>
</tr>
</tbody>
</table>
</fieldset>
<center> </center>
</fieldset>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="signature">
<div class="floatLeft20"> </div>
<a href="mailto:dubitoph@skynet.be">Conçu et réalisé par Christophe Dubois</a>
</div>
</body>

**E.Bzz** · 12/03/2010, 11h09

Ouille ouille ouille !

Pas étonnant que le nav s'embrouille.
Plusieurs id sont dupliqués (trmenu et tdmenu) ce qui est interdit.

De plus il y a des problèmes de structure : ton iframe par exemple est mal imbriquée dans la <table> (que tu devrais proscrire pour la mise en page : utilise des div et span).

Il y en a peut être d'autres ...

A+