Discussion :

[jyuzakumo]

Bonjour à tous,

Je suis novice dans le forum et j'espère que vos lumières m'aideront à y voir plus clair dans le monde impitoyable de l'Ajax.

Mon problème est le suivant. Je suis amené à développer une interface d'administration destinée à mettre à jour des données.
J'ai une page html avec un tableau (je vous épargne les détails) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<table id="table_grades" cellpadding="0" cellspacing="0" border="1">
        <thead>
                <tr>
                <th>Nom</th>
                <th>Prenom</th>
                <th>Date d'obtention</th>
                <th>Grade</th>
                </tr>
        </thead>
        <tbody id="tb" name="tb"><!-- ici on insère nos données issues de PHP (les <tr> de chaque personnes)-->
        </tbody>
</table>

Le but est d'effectuer une recherche selon les critères choisis par l'utilisateur (nom, prenom...) et d'afficher les résultats en temps réel.

J'ai opté pour une solution en AJAX qui fonctionne merveilleusement bien ... sous Firefox. Le navigateur le plus pourri que je connaisse, IE, refuse de m'afficher les lignes. Après un débuggage, il semble que le souci provienne d'un innerHTML de mon tbody au moment de la mise à jour...

Code :

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

1
2
3
4
5
if(xhr.responseText!="") {
lbletat.innerHTML = ""
lblres.innerHTML = ""
//alert(xhr.responseText)
document.getElementById("tb").innerHTML = xhr.responseText <<<< ici

Firefox ne bronche pas à cette syntaxe... auriez-vous une solution à ce problème ?

Merci d'avance et bonne soirée à vous.

[Ikonic]

Salut,

N'aurais-tu pas oublier les balises <tr></tr> et <td></td> ?

Voir DOM createElement et appendChild.

Peux-tu nous donner un exemple type de ta réponse xhr.responseText, pour pouvoir te proposer la correction ?

[jyuzakumo]

Salut et merci de ta réponse,

Alors les balises sont belles et bien fermées, je t'ai mis un imprime écran d'un alert de mon xhr.response.text.

Merci à toi

[E.Bzz]

Bonjour,
as-tu essayé de regénérer tout le tableau (de <table> à </table>) à la réponse d'Ajax ?
Avec IE6, ça ne pose pas de problème (bien que la syntaxe DOM soit toujours préférable).

A+

[jyuzakumo]

Bonjour,

Ta méthode a marché, merci énormément.

Je vais tout de même tenter de réecrire le code plus proprement, mais je ne vois pas comment procéder pour la mise à jour de plusieurs centaines de lignes via le DOM.
Peut être avez-vous une idée ?

Merci en tout cas, cela fonctionne très bien déjà !

[E.Bzz]

Je vais tout de même tenter de réecrire le code plus proprement, mais je ne vois pas comment procéder pour la mise à jour de plusieurs centaines de lignes via le DOM.

Normalement il suffit d'imbriquer correctement les boucles de créations des <tr> et <td>.
Le nombre de lignes du tableau final ne devrait pas augmenter la complexité du code ...

A+

[jyuzakumo]

Normalement il suffit d'imbriquer correctement les boucles de créations des <tr> et <td>.
Le nombre de lignes du tableau final ne devrait pas augmenter la complexité du code ...

A+

Je vais me pencher sur cette méthode qui m'a l'air forte intéressante.

Merci de vos conseils messieurs.

[jyuzakumo]

J'en profite pour éclaircir un autre point, la boucle doit se faire dans le code PHP je suppose ? Ce qui signifie que je dois avoir du code JS dans le fichier PHP qui me renvoie les lignes.
Comment intégrer ces résultats sans passer par le innerHTML ?

[E.Bzz]

J'en profite pour éclaircir un autre point, la boucle doit se faire dans le code PHP je suppose ? Ce qui signifie que je dois avoir du code JS dans le fichier PHP qui me renvoie les lignes.

Non, plutôt :
PHP devrait renvoyer les uniquement les données du tableau sous forme "structurée" (XML, texte avec séparateur ou autre).
A réception, JS lit ces données et les intègre à la page via les boucles faisant appel aux instructions DOM.

A+

[jyuzakumo]

Non, plutôt :
PHP devrait renvoyer les uniquement les données du tableau sous forme "structurée" (XML, texte avec séparateur ou autre).
A réception, JS lit ces données et les intègre à la page via les boucles faisant appel aux instructions DOM.

A+

Aurais-tu un exemple de ce genre de boucle sous la main ? Je dois dire que mon niveau est très basique et j'ai du mal à voir la procédure.
Dans ce cas tu préconiserais une solution response.Text ou XML ?

[E.Bzz]

Dans ce cas tu préconiserais une solution response.Text ou XML ?

Plutôt XML ...
Je n'ai pas d'exemple sous la main
Regarde peut-être du côté des librairies et autres frameworks. Ces fonctionnalités sont certainement prises en compte (mais j'utilise pas).

A+

[jyuzakumo]

Aurais-tu un exemple de ce genre de boucle sous la main ? Je dois dire que mon niveau est très basique et j'ai du mal à voir la procédure.
Dans ce cas tu préconiserais une solution response.Text ou XML ?

Très bien je vais effectuer quelques recherches.

Grand merci à toi.