IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[AJAX] Réponse ajax type responseXML et traitement DOM


Sujet :

JavaScript

  1. #1
    Nouveau membre du Club
    Inscrit en
    Décembre 2007
    Messages
    78
    Détails du profil
    Informations forums :
    Inscription : Décembre 2007
    Messages : 78
    Points : 26
    Points
    26
    Par défaut [AJAX] Réponse ajax type responseXML et traitement DOM
    Bonjour,

    j'organise la récupération de données sous forme de DOM comme suit:

    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
     
     
    // ... 
    // REQUETES SQL pour récuperer les données dans le fetch-assoc $rec...
     
     
    echo "<entries>";
    		echo		$rec['count(*)'];
    echo "</entries>";
     
    echo "<project_".$i.">";
     
    		// Information about Project
    		echo		"<projectId>";
    		echo			$rec['projectId'];
    		echo		"</projectId>";
     
    		echo 		"<title>";
    		echo			$rec['title'];
    		echo		"</title>";
     
    ...

    Dans mon script js Ajax je souhaite donc récupérer ces infos pour les "parser" et les écrire dans mon document :

    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
    // la réponse du traitement asynchrone effectué en PHP
    var docXML = xhr.responseXML; 
    
    // Mon DOC parent
    var write_in = document.getElementById('ajax-ListProjects');
    	  
    		  // lines to add on the table
    		  var lines = docXML.getElementsByTagName("entries").values;
    		  
    		  for(i=0; i<lines; i++)
    		  {
    			  
    			  var tableTr = document.createElement("tr");	  
    			  if(i%2 != 0)
    			  	tableTr.setAttribute("class", "alt");
    			  
    			  write_in.appendChild(tableTr);
    			  
    			  
    			  var tdTitle = document.createElement("td");
    			  var title = createTextNode( docXML.getElementsByTagName("title")[i].value );
    			  tdTitle.appendChild(title);
    			  write_in.appendChild(tdTitle);
    
    // ... 
    }

    Et voici l'erreur que j'obtiens sous Firebug :
    docXML has no properties
    [Break on this error] var lines = docXML.getElementsByTagName("entries").value;
    Il semble donc que je ne puisse pas récuperer les infos ?!
    Pourtant en lançant ma page .php manuellement (hors appel ajax), j'obtiens bien l'affichage du texte entre mes balises "entries" :
    <entries _moz-userdefined="">1</entries>




    EDIT >>>
    Pour info, je suis parti de l'exemple illustré sur ce tutoriel pour le principe.


    Merci de votre aide.

  2. #2
    Membre habitué
    Profil pro
    Développeur Web
    Inscrit en
    Juillet 2007
    Messages
    112
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juillet 2007
    Messages : 112
    Points : 157
    Points
    157
    Par défaut
    As tu bien pensé à ajouter la balise

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    header('Content-Type: text/xml');
    au début de ton fichier php ???

  3. #3
    Nouveau membre du Club
    Inscrit en
    Décembre 2007
    Messages
    78
    Détails du profil
    Informations forums :
    Inscription : Décembre 2007
    Messages : 78
    Points : 26
    Points
    26
    Par défaut
    Merci d'avoir relevé ceci !

    Celà dit j'ai un problème à mi-chemin : désormais ma page php construit bien mon DOM tree avec les infos récupérées depuis la base de données, mais ces infos ne sont pas écrites dans mon document parent une fois la "responseXML" récupérée en Ajax.

    Pourquoi ?
    Il s'agit de mettre en forme ces données sous forme de tableau, donc je créés des nodes "tr" et "td", ai-je bien le droit? Problème de syntaxe? (Je n'ai pas trouvé d'exemple dans mon bouquin Ajax, ils ne créent que des div ! )

    Je vous remets ici une petite portion :

    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
    if(xhr.readyState==4)
          {
    		  
    		  var docXML = xhr.responseXML;
    		  var write_in = document.getElementById('ajax-ListProjects');
    		  
    		  // lines to add on the table
    		  var lines = docXML.getElementsByTagName("entries").value;
    		  
    		  for(i=0; i<lines; i++)
    		  {
    			  
    			  var tableTr = document.createElement("tr");	  
    			  if(i%2 != 0)
    			  	tableTr.setAttribute("class", "alt");
    			  
    			  write_in.appendChild(tableTr);
    			  
    			  
    			  var tdTitle = document.createElement("td");
    			  var title = createTextNode( docXML.getElementsByTagName("title")[i].value );
    			  tdTitle.appendChild(title);
    			  write_in.appendChild(tdTitle);
    			  
    			  var tdLastupd = document.createElement("td");
    			  var lastupd = createTextNode("n/a");
    			  tdLastupd.appendChild(lastupd);
    			  write_in.appendChild(tdLastupd);
    
    ... 
                 }

    Les infos que je veux écrire devront donc être insérées dans le <div id="ajax-ListProjects"> </div> , qui est lui même imbriqué dans un <table></table> .

    Comme résultat, j'obtiens un grand vide à l'intérieur du div "ajax-ListProjects".

    Je n'ai certainement pas bien compris le traitement DOM sous javascript...

    Dans la portion que je vous soumet, j'espérais comme résultat html cette structure:

    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
     
    <table>
    <div id="ajax-ListProjects">
         <tr>
                  <td>
                       // contenu de var title
                  </td>
     
                  <td>
                      // contenu de var lastupd
                  </td>
     
                  // ...
         </tr>
    </div>

  4. #4
    Expert éminent sénior

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Points : 36 571
    Points
    36 571
    Par défaut
    Bonjour,
    il existe des instructions spécifiques pour ajouter des lignes dans un tableau ...

    As-tu essayé ?

    A+

  5. #5
    Nouveau membre du Club
    Inscrit en
    Décembre 2007
    Messages
    78
    Détails du profil
    Informations forums :
    Inscription : Décembre 2007
    Messages : 78
    Points : 26
    Points
    26
    Par défaut
    Citation Envoyé par E.Bzz Voir le message
    Bonjour,
    il existe des instructions spécifiques pour ajouter des lignes dans un tableau ...

    As-tu essayé ?

    A+
    On a posté en même tps. Merci, ca m'a l'air tout bon ce que tu proposes! Je vais tester ca.

    Merci !

  6. #6
    Nouveau membre du Club
    Inscrit en
    Décembre 2007
    Messages
    78
    Détails du profil
    Informations forums :
    Inscription : Décembre 2007
    Messages : 78
    Points : 26
    Points
    26
    Par défaut
    J'voudrais pas abuser de votre patience mais j'aimerais savoir si niveau syntaxe ca vous paraissait bon (DOM):

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var newRow = document.getElementById('myTable').insertRow(-1);
    			  if(i%2 != 0)
    			  	newRow.setAttribute("class", "alt");
    				
    var newCell = newRow.insertCell(0);
    newCell.innerHTML = docXML.getElementsByTagName("title")[i].value;
    
    newCell = newRow.insertCell(1);
    newCell.innerHTML = 'n/a';
    
    newCell = newRow.insertCell(2);
    newCell.innerHTML = docXML.getElementsByTagName("managerLname")[i].value+", "+docXML.getElementsByTagName("managerFname")[i].value;

    En gros je parse mon arbre DOM que j'ai construit au préalable, et qui est amené à avoir cette tête là :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    <entries>2</entries>
     
    <project_1>
          <title>Titre bla bla</title>
          <desc>Description bla bla</desc>
          ...
    </project_1>
     
    <project_2>
          <title>Titre bla bla</title>
          <desc>Description bla bla</desc>
    </project_2>

    Voilà pourquoi je suis amené à distinguer les noeuds title, desc, en fonction de leur indice.

    Est-ce que donc ceci:
    docXML.getElementsByTagName("title")[i].value;

    fait bien référence à mon titre du premier projet quand i=0 ?


    Merci.

  7. #7
    Expert éminent sénior

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Points : 36 571
    Points
    36 571
    Par défaut
    Citation Envoyé par n1n0x Voir le message
    Est-ce que donc ceci:
    docXML.getElementsByTagName("title")[i].value;

    fait bien référence à mon titre du premier projet quand i=0 ?
    A priori, oui ...

    A+

  8. #8
    Nouveau membre du Club
    Inscrit en
    Décembre 2007
    Messages
    78
    Détails du profil
    Informations forums :
    Inscription : Décembre 2007
    Messages : 78
    Points : 26
    Points
    26
    Par défaut
    Dans ce cas je ne comprends pas pourquoi quand je fais :

    alert("test: "+docXML.getElementsByTagName("title")[0]);
    ca m'affiche bien "test: [ object Element ]"

    alors que :


    alert("test: "+docXML.getElementsByTagName("title")[0].value);
    affiche "test: undefined"


    Comment faire pour accéder aux infos entre mes <tag></tag> du DOM ?
    .......

  9. #9
    Membre expérimenté Avatar de DoubleU
    Profil pro
    Inscrit en
    Janvier 2006
    Messages
    1 106
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2006
    Messages : 1 106
    Points : 1 388
    Points
    1 388
    Par défaut
    .nodeValue, pas .value

Discussions similaires

  1. [AJAX] Appeler un script php apres traitement réponse Ajax
    Par lekunfry dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 20/10/2008, 13h34
  2. [DOM] [Ajax]responseXML et méthodes DOM
    Par Herode dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 24/07/2006, 20h19
  3. [AJAX] texte réponse Ajax dans un conteneur div
    Par grinder59 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 12/02/2006, 18h07
  4. [Prototype] La réponse Ajax...
    Par SpaceFrog dans le forum Bibliothèques & Frameworks
    Réponses: 24
    Dernier message: 25/01/2006, 14h36
  5. [AJAX] Réponse XML - Functions Javascript
    Par ..:: Atchoum ::.. dans le forum Général JavaScript
    Réponses: 24
    Dernier message: 24/01/2006, 03h02

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo