Tableau créé en DOM, s'affiche sous FF, pas sous IE [JS DOM] - HTML/CSS - Programmation
Marsh Posté le 10-04-2007 à 10:04:05
Après ton append/replace de objTabExif rajoute juste la ligne suivante:
Code :
|
Parfois IE ne rafraichit pas l'affichage de la page lors de manipulations DOMs, la ligne dessus "force" ce rafraichissement.
Marsh Posté le 10-04-2007 à 10:30:01
ReplyMarsh Posté le 10-04-2007 à 10:48:27
ReplyMarsh Posté le 10-04-2007 à 10:49:23
nonau57 a écrit : Sur IE, il faut ajouter un element TBODY contenant chaque TR |
il faut pas plutot ajouter 1 element tbody contenant tous les TR ?
sémantiquement ca me parait plus juste
et innerhtml ne fonctionne pas dans un tableua sous IE
Marsh Posté le 10-04-2007 à 10:54:45
flo850 a écrit : et innerhtml ne fonctionne pas dans un tableua sous IE |
tombe bien c'est sur le div conteneur que je disais de le faire
Démo pour arrêter les digressions:
Code :
|
Marsh Posté le 10-04-2007 à 13:47:47
flo850 a écrit : il faut pas plutot ajouter 1 element tbody contenant tous les TR ? sémantiquement ca me parait plus juste et innerhtml ne fonctionne pas dans un tableua sous IE |
S'toutafé ça
Si je suis pas trop fatigué :
Code :
|
Marsh Posté le 10-04-2007 à 14:07:14
anapajari > je repondais a totau
et sinon, une question con : pourquoi tu fasi un new devant un appel de fonction ? ( en l'occurence createTrExif()
shinuza > pour en rajouter une couche tu peux avoir autant de tbody que voulu
et tu as aussi un element tfoot qui est utile. Par contre je suis pas sur que IE gere tout bien
Marsh Posté le 10-04-2007 à 14:22:45
flo850 a écrit : anapajari > je repondais a totau |
s'pas moi c'est serman qu'a commencé
En fait en js permet aussi de déclarer des "classes". A ce moment là, l'appel se fait avec new.
Moi j'ai juste repris le code posté plus haut, il s'en servait ainsi.
Maintenant c'est vrai qu'une classe nommée CreateTrExif c'est du grand nawak, d'autant qu'il ne se sert jamais du this ( qui devrait être l'objet retourné par sa méthode).
Marsh Posté le 10-04-2007 à 17:30:54
Je viens d'essayer le truc d'anapajari et ça marche parfaitement.
Respect messieur
Je ne l'aurais jamais inventé !
Marsh Posté le 10-04-2007 à 17:44:05
anapajari a écrit : s'pas moi c'est serman qu'a commencé |
Le grand nawak vient certainement du fait que c'est ma première création DOM et mon ancienneté dans la conception de site remonte au 2 février 2007. Quand ça s'est affiché sous FF, j'ai été le premier surpris d'avec réussi en 30 mn !
Là où je te suis, c'est que j'ai effectivement cherché à utiliser le fameux "this" (pour faire comme il dit dans mon bouquin : un "constructeur" et il utilisait bien un "new", d'où ma déclaration) mais j'ai foiré et donc j'ai abandonné...pour le moment, hein !
Si quelqu'un peut m'expliquer comment il faut faire (ou m'indiquer une référence accessible sur le sujet), je suis preneur !
Si mon "new" ne sert à rien, merci pour l'info et je le vire.
L'intérêt que je trouve dans cette méthode, c'est que chaque ligne est ajoutée de façon claire, facile à modifier et peu importe l'ordre. Ensuite, chaque nom de classe est indiqué qu'une seule fois, ce qui simplifie à mon avis les maintenances futures.
Mais bon, encore une fois, je débute et le DOM n'est pas ce que j'ai trouvé de plus facile pour démarrer.
Marsh Posté le 10-04-2007 à 17:47:31
Au fait merci des participations des autres. Pour l'histoire du tbody, le navigateur semble s'en foutre donc j'ai pas essayé. Ceci dit, pour moi, il me semble que tbody n'a d'utilité que si il y a un thead ou un tfoot. Sinon, on s'en fout, non ?
Marsh Posté le 10-04-2007 à 18:02:26
flo850 a écrit : il faut pas plutot ajouter 1 element tbody contenant tous les TR ? |
Faux ! Désolé, mais c'est la solution lourdingue que j'ai employé en attendant le messie anapajari et ça marche, aussi bien sous FF que IE :
Code :
|
D'ailleurs et dans ce cas, on ne peut même pas couper les lignes en utilisant :
document.getElementById("exif" ).innerHTML += et ligne suivante, il faut écrire tout d'un seul tenant (lourdingue, je vous dis).
C'est d'abord pour cela que je me suis mis au DOM dans un premier temps.
Marsh Posté le 10-04-2007 à 19:08:02
j'ai bien dis , dans un tableau
la tu remplace le contenu d'un div
essaye de modifier document.getElementById("tabExif" ).innerHTML ou de modifier un tr en particulier
sinon tu fais
var contenu ='';
contenu +='premiere ligne';
contenu +='deuxieme ligne';
ca améliore la lisibilité
Marsh Posté le 10-04-2007 à 21:29:24
flo850 a écrit : j'ai bien dis , dans un tableau |
Ah OK j'avais pô compris.
Pour la solution que tu préconises, il me semble avoir essayé dans un premier temps, mais sans succés, c'est pour ça que je suis passé au DOM (d'ailleurs, je trouve que c'est plus élégant, question d'habitude).
Marsh Posté le 10-04-2007 à 22:10:56
le dom est un peu plus elegant ( carrement plus ) , mais a des limites:
il est un peu plus lent a générer
tu ne peux pas générer des input
Marsh Posté le 10-04-2007 à 22:15:24
Ca dépend combien d'élements tu emboites/ajoutes, mais certaines fois il vaut mieux utiliser innerHTML.
Pour ma part je n'ai jamais généré assez d'éléments pour visualiser une quelconque lenteur.
Edit : French for dummies ça existe?
Marsh Posté le 10-04-2007 à 22:22:43
en ce moment, je "joue" avec un tableau qui a 20 colonnes, 5 000 lignes
je n'en affiche que 25 ( soit quand meme 500 cases, chacune contenant du gras, des liens, de l'italique , .... ), avec des fleches de défilements, et un slider pour permettre de naviguer au sein du tableau
les données sont instanciées a la demande ( xml httprequest dans tous les coins )
le système est un peu plus réactif avec innerHTML qu'avec dom
Marsh Posté le 10-04-2007 à 23:09:36
flo850 a écrit : en ce moment, je "joue" avec un tableau qui a 20 colonnes, 5 000 lignes |
Pour ajouter un input, que penses-tu de repérer la case avec un id généré en DOM (en utilisant setAttribute) et ensuite appliquer un innerHTML à cette case ?
Marsh Posté le 11-04-2007 à 09:17:12
ca devriat marcher
mais par habitude, j'evite de melanger dom /innerHTML
ce que je veux dire , c'est qu'il n'y a pas de solutions miracle , donc il faut etre conscient des limitations de ces deux methodes
Marsh Posté le 11-04-2007 à 09:24:19
flo850 a écrit : en ce moment, je "joue" avec un tableau qui a 20 colonnes, 5 000 lignes |
un peu plus réactif comme dans "ça fout l'ordi totalement à la ramasse quelle que soit la méthode?"
J'ai jamais fait aussi gros ( d'ailleurs je vois pas l'interet), mais j'avais fait 10 colonnes/500 lignes regroupées par bloc de 25 lignes ( résultat d'une recherche, groupé par page).
Et bin après de nombreux tests, le plus rapide était de générer tout le tableau dès le départ, de faire 20 tbody de 25 lignes et de joueur uniquement sur le display de ceux-ci.
serman a écrit : Pour ajouter un input, que penses-tu de repérer la case avec un id généré en DOM (en utilisant setAttribute) et ensuite appliquer un innerHTML à cette case ? |
Perso, j'ai tendance à le faire full dom je trouve ça plus aisé pour gérer les events. Mais Master Masklinn lui préfère innerHTML. C'est une question de gout...
Marsh Posté le 11-04-2007 à 09:32:17
anapajari a écrit : un peu plus réactif comme dans "ça fout l'ordi totalement à la ramasse quelle que soit la méthode?" |
j'ai le choix de la méthode à utiliser, mais pas celui de l'appli a réaliser
le but est de réaliser en full web l'équivalent d'un client lourd : un annuaire avec un fonctionnement comme itunes : a mesure que tu tape, ca reduit le tableau des resultats + possibilité d'utiliser un slider et des tris
en ojouant avec de la lazy instantiation , des requetes XML asynchrones j'arrive a rester dans des temps de reponses corrects ( moins d'une seconde dans le pire des cas ) et le passge dom=> innerhtml m'a fait gagner un petit peu de temps , mais a rendu le code moins lisible
anapajari a écrit : |
perso ca depend :
jouer avec la mise en page la structure de la page => dom
gros volume de texte a changer => innerhtml
plus les situations où on a pas trop le choix ( ajout d'un input => innerhtml , modification d'une ligne d'un tableau => dom )
Marsh Posté le 11-04-2007 à 09:37:21
flo850 a écrit : |
/me agrees
flo850 a écrit : plus les situations où on a pas trop le choix ( ajout d'un input => innerhtml , modification d'une ligne d'un tableau => dom ) |
Je comprends pas ce mythe de l'ajout d'un input ne peut se faire que via innerHTML!!!
1- ça marche très bien en DOM ( tous navigateurs, même pour l'id et toussa)
2- je trouve ça bien plus pratique pour ajouter des events ( comme je le disais juste avant)
Marsh Posté le 11-04-2007 à 11:09:33
tests perso :
version dom :
Code :
|
version innerHTML +dom : (parceque innerhtml seul ne fonctionne pas sur un tr, table , tbody )
Code :
|
la version innerHTML fonctionne sous IE , l'autre fait bien apparaitre les inputs, mais ils ne sont pas cliquables
Marsh Posté le 11-04-2007 à 11:59:59
j'aurais du me douter que tu allais me sortir l'exemple du radio qui effectivement ne marche pas "directement".
Tu noteras tout de même que via une redéfinition de l'event onclick, il n'y a plus de probleme:
Code :
|
Marsh Posté le 11-04-2007 à 15:30:50
pas fait expres, c'est un pb sur lequel je me suis pris la tete en fin de semaine derniere
je n'ai meme aps penser a utiliser le onclick , tellement j'etais persuadé que ca n'allais pas fonctionner
Marsh Posté le 08-04-2007 à 12:12:21
Bonjour tout le monde. Je fais appel pour la première fois à vos lumières car cette fois-ci, je ne trouve pas du tout la solution dans les multiples participations de ce forum.
L'object de mon problème :
J'ai voulu me mettre au DOM en créant un tableau, car innerHTML est assez lourd à manipuler dans ce cas là, même si ça marche (j'ai essayé).
Voici le code :
Et voici la fonction CreateTrExif :
Mon problème : le tableau s'affiche correctement sous FF, exactement comme je veux.
Sous IE, rien, blanc, nada.
Bien sûr, ça fait deux jours que je cherche ce qui chatouille Bill Gates : par exemple, les "alert" m'affiche bien le contenu de chaque case dans IE. Donc le programme fonctionne, pas d'erreur de code (je dis cela avec prudence vu que j'ai deux mois d'expérience).
Le seul pb semble l'affichage à l'écran. Et là, je sèche...
Quelqu'un a-t-il un début de solution ? Merci d'avance.