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

Vue hybride

Discussions similaires

Partager

Partager