begin process at 2012 05 29 07:50:31
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

Framework

 > 

Ajax

 > 

Contenu qui s'efface après XmlHttpRequest


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Contenu qui s'efface après XmlHttpRequest

vendredi 9 novembre 2007 à 10:49:55 | Contenu qui s'efface après XmlHttpRequest

Yoanned

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

vendredi 9 novembre 2007 à 12:27:12 | Re : Contenu qui s'efface après XmlHttpRequest

PetoleTeam

Membre Club
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)
vendredi 9 novembre 2007 à 13:43:06 | Re : Contenu qui s'efface après XmlHttpRequest

Yoanned

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 :

(...)
<table width="300" border="1" cellspacing="0" cellpadding="1">
  <tr>
    <td>Résultat 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>.

Ais-je fais uen bétise dans le innerHTML, ou est-ce finalement une mauvaise piste ?

vendredi 9 novembre 2007 à 15:20:10 | Re : Contenu qui s'efface après XmlHttpRequest

PetoleTeam

Membre Club
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 += "<optionvalue='" +element.firstChild.data +"'>" +element.firstChild.data +"</option>";
}
//-- pour plus de compatibilite
document.getElementById( 'output').innerHTML = Html;
(...)


;0)
vendredi 9 novembre 2007 à 15:21:40 | Re : Contenu qui s'efface après XmlHttpRequest

PetoleTeam

Membre Club
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)
vendredi 9 novembre 2007 à 15:38:50 | Re : Contenu qui s'efface après XmlHttpRequest

Yoanned

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 !
vendredi 9 novembre 2007 à 16:59:29 | Re : Contenu qui s'efface après XmlHttpRequest

PetoleTeam

Membre Club
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)
lundi 12 novembre 2007 à 10:37:01 | Re : Contenu qui s'efface après XmlHttpRequest

Yoanned

Réponse acceptée !

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>

<body onLoad="javascript:LoadXML();">

<table width="300" border="1">
  <tr>
    <td>Liste des trucs :</td>
    <td><form name="form1" method="post" action="">
        <select id = "toto" name="toto">
        </select>
      </form></td>
  </tr>
</table>

</body>

Merci PetoleTeam pour ton aide 



Cette discussion est classée dans : page, liste, déroulante, xhr, xmlhttprequest


Répondre à ce message

Sujets en rapport avec ce message

Actualiser une page ?? [ par rich25200 ] Bonjour,J'ai une page avec une liste déroulante qui est alimenté avec une base de données.. Je programme avec php... Et j'ai aussi d'autre champ texte Liste déroulante [ par mickaelpignier ] Bonjour je suis tres novice en javascript!!Voila je cherhce a enchainer des liste déroulantes ds la mem pageLa premier contien des utilisateurs , la d aide XMLHttpRequest [ par iomega ] Bonjour à tous, je suis débutant avec l'objet XMLHttpRequest J'ai une liste déroulante qui contient du materiel informatique créer dynamique avec du m XMLHttpRequest probleme [ par hlimaiem ] Limaiem heykelBonjour, j'ai un page php qui contient un tableau remplis depuis une base de donnees. Ma base et rempli a partir d'un programme en java mise à jour d'une liste déroulante [ par ahcorad ] Voila j'ai une page avec un formulaire et une liste déroulante de fonctions, si la fonction voulu n'est pas présente on peut en ajouter une en cliquan reload précis [ par ahcorad ] Voila j'ai une page avec un formulaire et une liste déroulante de fonctions, si la fonction voulu n'est pas présente on peut en ajouter une en cliquan Marche que sous IE (c'est pas le contraire d'habitude?) [ par ov3rdoze ] BonjourJ'ai 'fais' (merci http://www.siteduzero.com/tuto-3-3804-1-les-objets-xmlhttprequest.html) la fonction suivante : function recup Réinitialisation d'une liste déroulante après requete ajax [ par lowkey ] Bonjour,Voici ce que je développe :une question s'affiche, les réponses sont dans une liste déroulante.Lorsque je sélectionne une réponse, la question Afficher résultat d'une liste déroulante dans un tableau sans avoir a recharger la page [ par Evony ] Bonjour,Je dois créer une application php dans laquelle une liste déroulante contenant les employés apparait. Jusque la pas de problème, seulement, il objet XMLHttpRequest qui bloque le navigateur [ par webototo ] boujour à tous, sur un de mes sites j'ai une page en php qui envoi un mailing aux abonnés, script qui fonctionne parfaitement. voulant déclancher cett


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,591 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales