Discussion :

[publicStaticVoidMain]

Bonjour,
étant débutant en AJAX et en DOM, je fais face à un petit prob.
Je récupere les envois d'un serveur en ajax avec responseText. Ce que le serveur envoie est du code html et j'aimerais utiliser Dom pour manipuler les noeuds de cet arbre :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
 
function rappel(xmlhttp){
 var res; 
if(xmlhttp.readyState == 4){
   res = xmlhttp.responseText;
  /* Ce que je recois est du code HTML et jet dois le manipuler avec DOM 
 mais je ne sais pas cmt faire*/
}
 
div.innerHTML += res;
}

Des idées?

[Bovino]

Code :

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

if(xmlhttp.readyState == 4)

[publicStaticVoidMain]

Code :

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

if(xmlhttp.readyState == 4)

En effet, t'as raison. J'ai écrit mon post sans vérifier mon code.Je corrige tout de suite.


Mais mon prob persiste !!!

[Bovino]

Code :

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

div.innerHTML += res;

div, c'est quoi au juste ?

[publicStaticVoidMain]

Code :

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

div.innerHTML += res;

div, c'est quoi au juste ?

Une variable que j'initialise ainsi

Code :

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

1
2
 
var div = document.getElementById("table");

[DoubleU]

Essaie ca alors:
div.innerHTML = res;

sous réserve que res soit du contenu qu'on puisse ajouter normalement dans ton élément table.

NB: c'est pas vraiment du DOM ce que tu fais la ^^

[publicStaticVoidMain]

Essaie ca alors:
div.innerHTML = res;

sous réserve que res soit du contenu qu'on puisse ajouter normalement dans ton élément table.

Le contenu que je reçois du serveur est un tableau html que j'insere dans un div dont l'ID est table en faisant div.innerHTML += res.

Mon prob est que j'aimerais manipuler cette table html avec DOM. Je ne vois pas cmt faire.

NB: c'est pas vraiment du DOM ce que tu fais la ^^

Pourquoi?

[RomainVALERI]

NB: c'est pas vraiment du DOM ce que tu fais la ^^

Pourquoi?

une insertion propre dans le DOM se gère avec les méthodes

Code javascript :

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

1
2
3
4
 
document.createElement()
Element.setAttribute()
Node.appendChild()

...en opposition avec les diverses méthodes "non-DOM"

Code javascript :

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

1
2
3
 
Element.innerHTML = ...
document.write()

En plus, si je ne m'abuse, c'est justement avec les tableaux qu'innerHTML pose le plus de soucis...

[publicStaticVoidMain]

une insertion propre dans le DOM se gère avec les méthodes

Ca je savais, mais est ce quelqu'un sait cmt faire pour manipuler la réponse que je recois de xmlhttp.response en utilisant DOM.

Le code que j'ai écrit est en haut. MErci

[RomainVALERI]

---> pour "utiliser DOM", comme tu dis, il faut décomposer les éléments que tu veux insérer depuis ta réponse AJAX au lieu de la coller "en tas" avec un innerHTML... ^^ Tout est dans ton div...

[Bovino]

Une solution que j'utilise souvent (et qui fonctionne pas trop mal) est de générer du pseudo-xml.
En gros, tu définis des séparateurs sous forme de balises et tu imbriques le tout en fonction du résultat souhaité.
Par exemple, pour un tableau HTML, la réponse pourrait être du style :

Code :

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

responseText = "<ok>contenu1-1<1>contenu1-2<2>contenu2-1<1>contenu2-2"

Le <ok> sert juste à vérifier que la réponse est celle que j'attendais (dans la mesure où mes applis gèrent les exceptions et renvoient un résultat même s'il y a eu un problème).
Ensuite, pour construire la table coté JavaScript, je vérifie que la réponse est valide, puis j'utilise les méthodes du DOM :

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
if(xhr.responseText.match(/^<ok>/){
    var maTable = xhr.responseText.split('<ok>')[1].split('<2>');
    var newTable = document.createElement('table'), newTR, newTD;
    for(var i=0; i<maTable.length; i++){
        newTR = document.createElement('tr');
        mesTD = maTable[i].split('<1>');
        for(j=0; j<mesTD.length; j++){
            newTD = document.createElement('td');
            newTD.appendChild(document.createTextNode(mesTD[j]);
            newTR.appendChild(newTD);
        }
        newTable.appendChild(newTR);
    }
    div.appendChild(newTable);
}

[RomainVALERI]

Code javascript :

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

1
2
3
4
 
//...
    var newTable = document.createElement('table'), newTR, newTD;
//...

Je t'avouerai que, même si je comprends bien la logique de l'ensemble (c'est d'ailleurs vraiment chouette, bravo ), cette ligne m'échappe tout-à-fait...

On peut affecter une série de valeurs séparées par des virgules ... ? *rien compris* (et surtout : qu'est-ce qui est contenu dans newTable après cette mystique affectation... ? ^^)

[E.Bzz]

Je t'avouerai que, même si je comprends bien la logique de l'ensemble (c'est d'ailleurs vraiment chouette, bravo ), cette ligne m'échappe tout-à-fait...

+1

Eclaircissements demandés

[DoubleU]

On peut affecter une série de valeurs séparées par des virgules ... ? *rien compris* (et surtout : qu'est-ce qui est contenu dans newTable après cette mystique affectation... ? ^^)

T'avais pourtant donné la bonne réponse ^^

[Bovino]

C'est juste une déclaration de 3 variables, dont la première est un élément HTML table.

Code :

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

var newTable = document.createElement('table'), newTR, newTD;

est la même chose que :

Code :

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

1
2
3
var newTable = document.createElement('table');
var newTR;
var newTD;

[E.Bzz]

C'est juste une déclaration de 3 variables, dont la première est un élément HTML table.

Ah ben oui



C'est encore un peu tôt pour moi

A+

[RomainVALERI]

Hum
*fait chaud ici, non ?*

( bon ben je ne déclare jamais les variables ensemble et du coup j'en avais même oublié la possibilité en js... ^^)

[publicStaticVoidMain]

Code :

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

1
2
 
var maTable = xhr.responseText.split('<ok>')[1].split('<2>');

Ce code renvoie quoi?

[E.Bzz]

Code :

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

1
2
 
var maTable = xhr.responseText.split('<ok>')[1].split('<2>');

Ce code renvoie quoi?

Plutôt "Où ?"
=> Vers la FAQ

A+

[RomainVALERI]

Ce code renvoie quoi?

String.split() renvoie un tableau de chaines.
Ici, les deux appels sont chainés grâce au [1] qui sélectionne l'élément d'indice "1" du tableau renvoyé par le premier split()... ^^

En décomposant, ça donnerait :

Code javascript :

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

1
2
3
4
 
var maReponse = xhr.responseText.split('<ok>');
var premierePartie = maReponse[1];
var maTable = premierePartie.split('<2>');

Mais c'est plus joli en une ligne