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+