Posez votre question Signaler

Contenu qui s'efface après XmlHttpRequest [Résolu]

Messages postés
4
Date d'inscription
vendredi 9 novembre 2007
Dernière intervention
12 novembre 2007
 - - Dernière réponse : Yoanned
Messages postés
4
Date d'inscription
vendredi 9 novembre 2007
Dernière intervention
12 novembre 2007
 - 12 nov. 2007 à 10:37
Javascript / DHTML Posez votre question Signaler
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 :




<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>






  ----

    Liste de TRUCS :,
    <script>window.onLoad(submitForm());</script>,
 








</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
Afficher la suite 

Votre réponse

Répondre au sujet

7 réponses

Meilleure réponse
Signaler Commenter la réponse de Yoanned
Messages postés
4
Date d'inscription
vendredi 9 novembre 2007
Dernière intervention
12 novembre 2007
3
Merci
J'ai résolu mon problème !
Et ce de la manière suivante :
 
xhr.onreadystatechange = function() {






if (xhr.readyState == 4) {
     if(xhr.status
  == 200) {
   var doc = xhr.responseXML; 
   var test = doc.getElementsByTagName('trucs').length
   for (i=0; i<=test-1; i++){
    var element = doc.getElementsByTagName('trucs').item(i);  //Ici, truc est la valeur du nœud dans le fichier XML
    document.getElementById("toto").options[i] = new Option(element.firstChild.data, element.firstChild.data);
    //document.getElementById("toto").add(new Option(element.firstChild.data,element.firstChild.data)); -->
   }
    } else {
   alert("erreur");
     }
   }
}
 
xhr.open('GET', 'fichier.xml', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                  
xhr.send();
 
}
</script>




</head>







  ----

    Liste des trucs :,
    <form name="form1" method="post" action="">
        <select id = "toto" name="toto">
        </select>
      </form>,
 









Merci PetoleTeam pour ton aide 

Merci Yoanned 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources a aidé 97 internautes ce mois-ci

Commenter la réponse de Yoanned
Signaler Commenter la réponse de PetoleTeam
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
0
Merci
Bonjour,
Normal... il ne faut pas utiliser document.write qui clear le contenu du document, mais écrire ton résultat dans un div par exemple avec innerHTML
 


;0)
Commenter la réponse de PetoleTeam
Signaler Commenter la réponse de Yoanned
Messages postés
4
Date d'inscription
vendredi 9 novembre 2007
Dernière intervention
12 novembre 2007
0
Merci
Bonjour PetroleTeam !
J'ai essayé de mettre en place la solution en innerHTML de la manière suivante :




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



Et plus loin, entre les balises BODY :



(...)
  ----

    Résultat de TRUCS :,
       
<script>window.onLoad(submitForm());</script>

   ,
 

(...)



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

.



Ais-je fais uen bétise dans le innerHTML, ou est-ce finalement une mauvaise piste ?
Commenter la réponse de Yoanned
Signaler Commenter la réponse de PetoleTeam
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
0
Merci
Peut être avec cela...
(...)
var doc  = xhr.responseXML;
var Html = "<select><option>--- Vide ---</option>";
var O_Region = doc.getElementsByTagName('region');
for (i=1; i<=50; i++){
  var element = O_Region.item(i);  Html +"< option <gras>value</gras>'" +element.firstChild.data +"'>" +element.firstChild.data +"</option>";
}
//-- pour plus de compatibilite
document.getElementById( 'output').innerHTML = Html;
(...)



;0)
Commenter la réponse de PetoleTeam
Signaler Commenter la réponse de PetoleTeam
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
0
Merci
petit problème avec l'éditeur qui a mangé l'espace entre option et value, je pense qu'il en a été de même pour toi donc ?...


;0)
Commenter la réponse de PetoleTeam
Signaler Commenter la réponse de Yoanned
Messages postés
4
Date d'inscription
vendredi 9 novembre 2007
Dernière intervention
12 novembre 2007
0
Merci
Malheureusement non ça ne fonctionne pas... Je reste sur le tableau vide (sans la liste déroulante), et j'ai une erreur Javascript sur cette ligne :








Html += "<option value='" +element.firstChild.data +"'>" +element.firstChild.data +"</option>";







"Objet attendu".
J'ai bien fait attention à remettre l'espace, mais ce n'est pas cela !
Commenter la réponse de Yoanned
Signaler Commenter la réponse de PetoleTeam
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
0
Merci
BOUUUUU! Réponse en vrac de ma part...

  //-- Récup contenu fichier
  Obj  = XML_Http.responseXML;
  Html = "<select>"
  //-- Récup des Tag
  Noeud = Obj.getElementsByTagName("region");
  //-- Parcours l'objet
  for( i= 0; i <Noeud.length; i++){
    //-- Récup des textes
    Html + = "<option>" + Noeud[i].firstChild.data + "<\/option>";
  }
  Html += "<\/select>";
 


;0)
Commenter la réponse de PetoleTeam

Votre réponse

Répondre au sujet
Posez votre question
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.