Interface inchangé après l'ajout d'un tableau en javascript

Bonjour,

Je vous explique le petit problème.

Je génère un tableau avec un script Javascript, après que le tableau soit généré, je l'insert à l'aide d'un innerHTML dans un div qui était la auparavant, mais vide.

Le tableau s'insert bien, il est visible, cependant le reste de ma pages ne bouge pas. c'est à dire qu'il s'affiche mais par dessus ses divs parents.

Ses parents ne s'adaptent donc pas à la longueur du tableau.

J'ai mit l'exemple en ligne -> http://tsunammis.com/dev/Tarot-jQuery/

Vous pouvez lancer la génération d'un tableau (Avec le nombre de joueurs et de parties), vous ne pouvez pas enregistrer de tableau (je l'ai désactivé).

Je vous conseil de lister le dossier de sauvegarde et de lancer le fichier "erreur_de_div"

Vous voyez donc sur l'exemple que le div est par dessus le reste, j'aimerais que ses 3 divs parents s'adaptent à lui.

Merci à l'avance,
Cordialement,
Tsunammis.

PS: Il n'y a pas de mode de prévisualisation ?
Modifié par tsunammis (26 Mar 2008 - 17:57)

tsunammis a écrit :
je l'insert à l'aide d'un innerHTML

Je dirais bien :
- qu'au moins une partie de ton problème vient de là.
- que innerHTML n'est pas, à ce que je peux me souvenir de quelques fils de discussion sur ce forum, un moyen standard/recommandé.
- que tu pourrais essayer avec plus de succès appendChild à la place.

aCOSwt a écrit :

Je dirais bien :
- qu'au moins une partie de ton problème vient de là.
- que innerHTML n'est pas, à ce que je peux me souvenir de quelques fils de discussion sur ce forum, un moyen standard/recommandé.
- que tu pourrais essayer avec plus de succès appendChild à la place.

Au contraire, c'est le moyen le plus rapide existant et tout le monde le dira. Pour créer des éléments dans le DOM
le DOM c'est très bien, très beau très propre (je l'utilise tous les jours)
Mais il arrive que parfois tu as juste besoin d'injecter une grosse partie de code HTML venant d'une requete Ajax ou bien d'une gros systeme de template qui te retourne une string contenant du code HTML. Et bien là innerHTML est parfait pour ça.

genre pour générer un tableau de 5 colonnes et de 1000 lignes, fait le avec du DOM et fait le à coup de chaines de caractères avec un innerHTML au final.
et calcule le temps sous FF puis sous IE, tu comprendras la différence.

Et pour répondre au problème :
Enlève moi le height:100% sur #containerLarge (ton pb vient de là)
Colle moi le background de #containerLarge sur le body
et vire moi aussi ton height:100% sur #container

Gatsu35 a écrit :

calcule le temps sous FF puis sous IE, tu comprendras la différence.

Merci pour la leçon Gatsu35. Je reconnais volontiers que depuis que j'ai laissé tomber innerHTML pour la raison que je le croyais maudit en ces lieux... mes javascripts trainent légèrement la grolle...

aCOSwt a écrit :


Merci pour la leçon Gatsu35. Je reconnais volontiers que depuis que j'ai laissé tomber innerHTML pour la raison que je le croyais maudit en ces lieux... mes javascripts trainent légèrement la grolle...

Moi c'est juste par expérience sur des grosses applis ajax ou faut générer des listes de 800 contacts par exemples (avec les events qui viennent derriere). Ben je peux te dire que c'est pas la panacé si tu y vas à coup de DOM

en remplacant la génération de TR (TR/TD) en dom (donc appendchild derriere) par la génération d'une grosse string HTML et un innerHTML
sous FF je suis passé de 6 à 3s et sous IE je suis passé de 40 à 4s
sur un échantillon de 1000 contacts (le tableau était composé de 10colonnes avec 36 traitements derrière)

Gatsu35 a écrit :
Et pour répondre au problème :
Enlève moi le height:100% sur #containerLarge (ton pb vient de là)
Colle moi le background de #containerLarge sur le body
et vire moi aussi ton height:100% sur #container

Merci beaucoup pour l'astuce, est-ce que tu as le temps d'expliquer le pourquoi du comment ? histoire que je ne refasse plus la même erreur. (Le problème est résolu)
Merci à l'avance !

Pour le javascript, je n'avais pas pensé à l'appendChild ... mais la ça marche bien comme ça, j'essayerais si j'ai le temps.

tsunammis a écrit :


Merci beaucoup pour l'astuce, est-ce que tu as le temps d'expliquer le pourquoi du comment ? histoire que je ne refasse plus la même erreur. (Le problème est résolu)
Merci à l'avance !

Pour le javascript, je n'avais pas pensé à l'appendChild ... mais la ça marche bien comme ça, j'essayerais si j'ai le temps.

un height c'est figé donc comme toi tu lui balance un height:100% il restera figé à la hauteur de ta page.

et sinon pour le appendChild c'est purement du DOM, mais clairement on s'en cogne pour une bonne raison : le innerHTML est largement mieux pour ton problème actuel.