Contenu qui s'efface après XmlHttpRequest

**Yoanned** · 09/11/2007, 10h59

Bonjour à tous !

Je suis débutant en Javacript, et je m'arrache les cheveux sur un problème que je ne sais pas résoudre...
J'essaie de récupérer des informations depuis un fichier XML distant, et de les placer dans une liste déroulante ; ce que je suis arrivé à mettre en place avec XmlHttpRequest en récupérant des morceaux de code à gauche à droite. Pour faire simple et pour tester déjà, j'ai fait sur ma page HTML un tableau de deux cellules, avec dans la cellule de gauche un simple texte, et dans la cellule de droite mon résultat de fonction Javascript, c'est à dire ma liste déroulante.

Seulement, j'ai un problème "d'affichage". Lorsque je charge ma page, je tombe tout d'abord sur mon tableau, mais sans la liste déroulante, ce qui me semble normal puisque la fonction n'a pas encore renvoyé le résultat. Puis, au bout d'une demi-seconde, ma page se recharge... et je n'ai plus que ma liste déroulante.

Vous en conviendrez donc que si mon code Javascript efface le reste de la page, cela va poser un problème !

Voici le code de ma page HTML :

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
<html>
<head>
<title>Test XMLHttpRequest</title>
<script language="javascript"> 
 
function submitForm(){ 
 
 var xhr = null;
 
 if (window.XMLHttpRequest) { 
  xhr = new XMLHttpRequest(); 
  //  Firefox, Safari, ...
 } else if (window.ActiveXObject) {
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
  // Internet Explorer  
 } else {
       alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
       xhr = false; 
 } 
 
 xhr.onreadystatechange = function() { 
 
  if (xhr.readyState == 4) { 
   if(xhr.status  == 200) { 
    var doc = xhr.responseXML;    
    document.write("<select>");    
    for (i=1; i<=50; i++){ 
     var element = doc.getElementsByTagName('TRUCS').item(i);
     document.write("<option value='"+element.firstChild.data+"'>"+element.firstChild.data+"</option>");
    } 
    document.write("</select>");  
            } else { 
 
    }
  }
 } 
 
 xhr.open('GET', 'http://www.site-distant.com/fichier.xml', true);
 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                   
 xhr.send();
 
} 
 
</script>
</head>
<body>
 
<table width="300" border="1">
  <tr>
    <td>Liste de TRUCS :</td>
    <td><script>window.onLoad(submitForm());</script></td>
  </tr>
</table>
 
</body>
</html>

Voilà donc ce code qui me fait désespérer...
En espérant que tout ceci vous inspire plus que moi, je vous remercie beaucoup de votre attention et de vos éventuelles réponses !

Cordialement,
Yoanne

**SpaceFrog** · 09/11/2007, 11h02

évite le document.write et préfère lui un obj.innerHTML ou .data ...

**Bisûnûrs** · 09/11/2007, 11h04

C'est parce que tu utilises document.write() => A jeter.

Utilise cette méthode :
http://javascript.developpez.com/faq...DOM#DOMajouter

**Yoanned** · 09/11/2007, 11h08

Merci pour vos réponses rapides.

Je vais essayer de mettre en place ce qu'à proposé SpaceFrog.(Edit : ou celle de Bisûnûrs !)
Je vous tiens au courant rapidement !

**Yoanned** · 09/11/2007, 11h43

Bisûnûrs, je dois t'avouer que je ne comprends pas bient on code par rapport au mien... si tu pouvais m'expliquer qu'est ce que cela remplace, à peu près, je t'en serait vraiment reconnaissant !

EDIT :
J'ai essayé de mettre en place la solution en innerHTML de la manière suivante :

Code :

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

1
2
3
4
5
6
7
var doc = xhr.responseXML; 
     output.innerHTML = "<select><option>--- Vide ---</option>";
     for (i=1; i<=50; i++){ 
	var element = doc.getElementsByTagName('TRUCS').item(i);
output.innerHTML+="<optionvalue='"+element.firstChild.data+"'>"+element.firstChild.data+"</option>";
     }
    output.innerHTML+="</select>";

Et plus loin, entre les balises BODY :

Code :

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

1
2
3
4
5
6
7
8
<table width="300" border="1" cellspacing="0" cellpadding="1">
  <tr>
    <td>Liste de TRUCS :</td>
    <td>
    <div id="output"><script>window.onLoad(submitForm());</script></div>
    </td>
  </tr>
</table>

Donc tout ceci m'affiche bien mon SELECT avec à l'intérieur ma ligne "--- Vide ---", mais uniquement cela ! Et juste à côté j'ai la liste de mes résultats qui auraient dû être dans le SELECT, mais au format texte en ligne, comme entre balises <p></p>.

Que faire, y'a-t-il une solution dans l'innerHTML ou est-ce finalement une mauvaise piste ?

Contenu qui s'efface après XmlHttpRequest

JavaScript

Discussions similaires

Partager

Partager