cmt remplacer le contenu d'1 div par celui d'1 fichier XML (suite)?

cmt remplacer le contenu d'1 div par celui d'1 fichier XML (suite)? - HTML/CSS - Programmation

Marsh Posté le 03-01-2012 à 19:45:55    

Bonsoir tout le monde
 
Je crèe ce nouveau post faisant suite à celui là
http://forum.hardware.fr/forum2.ph [...] w=0&nojs=0
 
afin d'y voir plus clair les données du problème ayant evoluées favorablement
 
pour resumer
 
j'ai un fichier style css
j'un code html avec dans le body une certaine div avec son id toto
 
par ailleurs j'ai aussi un fichier xml
 
plus un certains nombres de fichiers js en javascript, parmi lesquels l'un contient deux fonctions
 
l'une ecrire
l'autre charger
 
je sais pas si j'ai tout bien intégrer les noms etc.. mais si j'ai bon j'utilise les methodes de la DOM
 
--> ma fonction ecrire recoit en paramètre un message qui est une chaine de caractères et qui en utilisant cette instruction:

Code :
  1. document.getElementById("toto" ).innerHTML=message


modifie le contenu de la div toto dans mon html en y insérant le dit message
 
--> ma fonction charger elle, recoit en parametre le nom de mon fichier xml, tout en utilisant XMLHttpRequest et les autre responseXML, parcour le fichier xml, me l'interprete suivant mon souhait pour me le traduire
 
en une chaine de caractère avec des balises de presentation de sorte que lorsque j'envoie cette chaine a ma fonction ecrire je me retrouve avec dans la div toto une interpretation d'une partie souhaitée du xml
 
Afin de pouvior utiliser du css et non du <b> <I>.... j'ai un peu modifié ma fonction charger
de sorte que le message obtenu est exactement ceci affiché dans le navigateur
 
<blocknote><div id='book'><div id='num'>1</div><div id='titre'>le retour du roi</div><div id='auteur'>Tolkien</div></div></blocknote>
 
pour un xml qui serait
 
<racine>
      <book>
          <num>1</num>
          <titre>le retour du roi</titre>
          <auteur>Tolkien</auteur>
      </book>
</racine>
 
comment je peux m'en sortir pour que mon navigateur m'affiche dans la div toto non pas mes balises html en mode texte mais bien leur
evaluation avec sur chacune des div book, num, titre auteur, la partie du css qui va bien?
 
j'ai bien tenté de remplacé dans ma fonction ecrire ....innerHTTML=message
 
par ....innerHTTML = document.write(message);
ou encore  
par ....innerHTTML = eval(message);
 
mais y a un truc qui cloche
 
j'espère etre assez clair et concis dans le resultat que je cherche a obtenir apres c'est au niveau du traitement que j'oublie
un mecanisme surement soit dans le charger, soit dans ecrire, ou les deux, ou peut etre meme qu'il me faut des fonctions supplémentaires
 
en espèrant que vous puissiez m'éclairer dans ce que j'ai pas saisi ou oublié pour donc:
presenter à ma sauce et mis en forme avec mon css
les parties du xml qui m'interressent dans du html
 
par le biais de dom, javascript....
 
merci a vous par avance pour votre aide et vos lumieres
:jap:

Reply

Marsh Posté le 03-01-2012 à 19:45:55   

Reply

Marsh Posté le 04-01-2012 à 01:05:58    

que vous manque t'il comme information pour evoquer des idées?
 
pensez-vous qu'a priori le concept telquel pourrait fonctionner?
 
serait-ce un truc javascript qui manque?
 
parce que si je laisse ma fonction ecrire tel qu'au debut j'obtiens dans ma div toto un affichage avec tous les < </ div etc... comme indiqué au dessus
 
si je mets document.write(message) j'obtiens cette fois en dehors de la div toto, la meme chaine qu'au dessus
 
et si je mets eval(message) il me sort une erreure de syntaxe
 
si au contraire vous pensez qu'il manque une etape dans l'algorithme quelle serait elle? faut il que j'envisage une autre fonction ecrire et mettre les differentes sous-div book titre etc... directement dans le html et que je fasse le ecrire a chaque fois qu'un noeud m'interresse dans charger
 
ou encore une autre idee faut il une autre sorte de chaine que celle que me rend charger que je puisse utiliser avec un parser de text  integré au navigateur?
 
a moins qu'il existe une solution toute faite pour lier mon traitement du xml a des divs du html un peu différente de mon approche actuelle
 
j'avoue que je suis un peu largué entre ce qui cloche, ce que je voudrais et ce qui pourrait manquer tout en imaginant en cas de strategies multiples ce que je pourrais envisager au mieux :(


Message édité par tintin34 le 04-01-2012 à 01:11:36
Reply

Marsh Posté le 04-01-2012 à 10:30:36    

Je lis ca et là que innerHTML recoit apres le = du code html
 
donc ma question se résume à
que doit contenir ma variable message?
 
pour le moment elle contient:
'&lt;'+'blocknote'+'&gt;'+......
 
ou dois je comprendre de choses confuses lues ailleurs que je ne peux pas créer simplement mon code à ajouter par une chaine et que je devrais passer par des creatElement ou un truc du genre? :heink:  :??:

Message cité 1 fois
Message édité par tintin34 le 04-01-2012 à 10:42:04
Reply

Marsh Posté le 04-01-2012 à 16:43:04    

tintin34 a écrit :

Je lis ca et là que innerHTML recoit apres le = du code html
 
donc ma question se résume à
que doit contenir ma variable message?
 
pour le moment elle contient:
'&lt;'+'blocknote'+'&gt;'+......
 


 
Il y a effectivement un problème avec le contenu de la variable message.
 
Elle doit ne doit pas contenir les &lt; et &gt; qui sont les codes permettant d'afficher un "<" ou un ">".
Il faut directement concaténer des "<" et ">" dans la variable message afin que le navigateur puisse l'interpréter en tant que code HTML.
 
Ensuite la balise <blocknote> n'existe pas à ma connaissance ne serai-ce pas plutôt un <blockquote> que tu souhaite utiliser.
 
L'utilisation du innerHTML de la façon suivante est approprié.
 

Code :
  1. document.getElementById("toto" ).innerHTML = message;


Message édité par spamoa le 04-01-2012 à 16:45:49
Reply

Marsh Posté le 04-01-2012 à 17:29:04    

bon ok meci spamoa j'avais ecrit comme tu me le sugères à l'instant dans mes premiers essais sauf que le style pour la div toto (centré) s'appliquait à tout l'interrieur y compris apparament aux sous-div concaténées dans message comme book titre...
 
maintenant c'est fort possible que en fait bloknote existait pas que c'etait en fait blockquote que j'avais lu une fois dans un exemple
 
et que cette erreur de ma part ai bloqué l'application des styles definis pour book titre...
 
tu penses que ca peut etre une explication ou bien si je veux des styles différent à l'interrieur de toto je dois les mettre en fixe dans ma chaine?
 
PS : je viens de faire des essais avec les modifs proposées les < et blockquote mais le style du css passe toujours pas :(

Message cité 1 fois
Message édité par tintin34 le 04-01-2012 à 17:52:18
Reply

Marsh Posté le 04-01-2012 à 18:28:24    

tintin34 a écrit :

bon ok meci spamoa j'avais ecrit comme tu me le sugères à l'instant dans mes premiers essais sauf que le style pour la div toto (centré) s'appliquait à tout l'interrieur y compris apparament aux sous-div concaténées dans message comme book titre...
 
maintenant c'est fort possible que en fait bloknote existait pas que c'etait en fait blockquote que j'avais lu une fois dans un exemple
 
et que cette erreur de ma part ai bloqué l'application des styles definis pour book titre...
 
tu penses que ca peut etre une explication ou bien si je veux des styles différent à l'interrieur de toto je dois les mettre en fixe dans ma chaine?
 
PS : je viens de faire des essais avec les modifs proposées les < et blockquote mais le style du css passe toujours pas :(


 
Le contenu d'une div hérite des styles de la div jusque la rien d'anormal il faut redéfinir les paramètre que tu ne souhaite pas conserver dans le style du blockquote. (via <blockquote class="maclasse"> dans l'html et blockquote.maclasse {...} dans la css).
 
Dans tes dernier test le HTML est-il interprété correctement ?
 
Avant dans ton navigateur tu avais ceci :
 
<blocknote><div id='book'><div id='num'>1</div><div id='titre'>le retour du roi</div><div id='auteur'>Tolkien</div></div></blocknote>  
 
Maintenant est-ce-que tu as au moins qqchose qui ressemble à cela :
 
1
le retour du roi
Tolkien
 
Si tel est le cas il te suffit de définir des style pour chacune de tes div et/ou pour le blockquote.
 
Voici a quoi doit ressembler le code html contenu dans la variable message :

Code :
  1. <blockquote class="maclasse">
  2.     <div id='book'>
  3.         <div id='num'>1</div>
  4.         <div id='titre'>le retour du roi</div>
  5.         <div id='auteur'>Tolkien</div>
  6.     </div>
  7. </blockquote>


 
Et voici ce que l'on doit trouver dans la feuille de style pour mettre en forme tout ça :
 

Code :
  1. blockquote.maclasse {
  2. /* mes styles du blockquote */
  3. }
  4. div#book {
  5. /* mes styles de la div book */
  6. }
  7. /* Idem pour les autres div */


 
Peut-être le sait-tu déjà mais je préfère le préciser au cas ou :
Tu aura noté la légère différence de syntaxe entre l'application de style sur une classe et sur une id.
En CSS on utilise un "." pour indiquer que l'on applique un style sur une classe et un "#" pour les id.
 
Si ton blockquote est destiné a être affiché plusieurs fois sur la page je te conseil d'utiliser plutôt des classes que des id. Car il est préférable de conserver des id unique (pour les utiliser en JS par exemple).
 
Un petit denier "Tip of the day" pour vérifier qu'une CSS s’applique bien sur une div tu peut lui mettre ou couleur criarde en arrière plan (comme ça tu peut pas la raté).
Ajoute le code suivant dans ta CSS et dis moi ce que ça donne :

Code :
  1. div#book {
  2.    background-color: red;
  3. }

Reply

Marsh Posté le 05-01-2012 à 02:28:47    

bon ok merci pour toutes tes precisions utiles  qui m'orientent dans mes investigations
 
j'avais vaguement noté la difference pour id et class dnas les css et j'etais moi sur l'id avec #
 
pour ce qui est de l'html on peut dire que oui il es revenu "normal" dans la mesure ou le texte sans l'explicitation des balises est revenu
 
ce que j'avais déjà obtenu avant ce second post, en revanche les styles s'appliquent pas dans la mesure où seule celui de la balise toto perdure
 
je vais essayer de voir si j'arrive a mieux en utilisant class...
 
je vais commencer par faire en premier lieu sans rien changer avec ta proposition de de couleur d'arriere plan en rouge pour book histoire de voir si quelque chose change entre le style toto et l'interne
 
et je reviens donner le resultat demain avant autres modifs
 
en tout cas merci de ton aide, j'ai de nouveau la sensation d'etre sur un chemin plutot que dans le brouillard ;)
 
PS: dans mon css j'avais bien defini des styles pour book titre etc.. mais avec # et sans l'utilisation de class dans blockquote ni aucune autre div interne construite dans message
 
 
je comprends de ta derniere intervention que je dois utiliser class pour ma div globale construite dans message et definir autrement dans mon css les sous div que j'inclue dans message.
 
je veux bien d'autant plus intégrer tout ca que en essayant d'afficher la source le code html issu de message apparrait pas et que donc j'ai du mal a intégrer comment donc le css externe pourrait s'appliquer alors sur ces div dans la variable message d'ou ta suggestion : rajouter une class sur la balise global qui englobe mon rajout et y definir avec des . plutot que des # des sous styles - j"essaie d'intégrer ca en 2e i-temps apres t'avoir dit ce que faisait le point precedant ;) pour info mon blockquote est a afficher qu'une seule fois sur une même instance de page je l'ai juste mis histoire de ùe donner un unique bloc externe html sans trop savoir sa réelle utilisation en fonction d'un vieux script que j'avais souvenir avoir vu une fois --> d'où ma panique sur l'orthographe de la balise originelle apeès cette balise html de plusne m'apporte rien de probant si ce n'est un conteneur et peut etre de ce que je comprends de ta derniere intervention, une possibilité plus directe d'attacher mes "sous-styles à message"
:sweat:  
 
:hello:


Message édité par tintin34 le 05-01-2012 à 02:54:20
Reply

Marsh Posté le 05-01-2012 à 12:40:51    

j'ai donc copié dans le .css tes trois dernieres lignes de code
 

Code :
  1. div#book {
  2.    background-color: red;
  3. }


 
mais ca change rien du tout mon texte dans message est toujours est toujours ecrit avec une ligne par div (le retour à la ligne se fait donc tout seul) mais toutes les lignes sont centrées sur le fond lavande du fond de la page  
 
pas de rouge dans la page :heink:

Reply

Marsh Posté le 05-01-2012 à 13:33:51    

tintin34 a écrit :

j'ai donc copié dans le .css tes trois dernieres lignes de code
 

Code :
  1. div#book {
  2.    background-color: red;
  3. }


 
mais ca change rien du tout mon texte dans message est toujours est toujours ecrit avec une ligne par div (le retour à la ligne se fait donc tout seul) mais toutes les lignes sont centrées sur le fond lavande du fond de la page  
 
pas de rouge dans la page :heink:


 
Le retour à la ligne en fin de div c'est normale (si tu n'en veux pas remplace tes div pas des span).
 
Par contre la je sèche concernant le fait que le style ne s'applique pas.
 
Pourrais-tu coller ici un code (HTML, CSS et JS) reproduisant le bug afin que je puisse l'analyser plus en détails?

Reply

Marsh Posté le 05-01-2012 à 17:54:21    

voulant epurer le css en en faisant un 3eme a partir de deux que j'ai (un pour les positions... et l'autre pour les couleurs et en suppriment tous les styles qui serviront dna sle projet final mais qui servent pas dans le cas de la petite simulation que je fais pour le moment
 
tout d'un coup les styles sont apparus c'est un mystere
donc logique qu'on seche toi, moi, les autres ...
 
donc en gros je vais bien finir par m'en sortir maintenant grace à ton , tes interventions pour lesquelles je te remercie encore, je sais que que ce que je simule fonctionne que j'arrive a peu pres à me balader dans le xml y a quelques trucs qui marchent pas bien quand j'essai de descendre au niveau des petits fils mais bon je vais peut etre trouver
 
genre au lieu d'avoir <auteur>Tolkien</auteur>
j'ai en fait <auteur><civil>Monsieur</civil><nom>Tolkien</nom><aff></aff></auteur>
 
et je veux afficher donc dans la div auteur des sous div et toute la denomination de l'auteur et je comprends pas trop pourquoi ma boucle va pas
 
ca doit etre une petite clownerie bien cachée :hello:


Message édité par tintin34 le 05-01-2012 à 18:04:47
Reply

Marsh Posté le 05-01-2012 à 17:54:21   

Reply

Marsh Posté le 18-01-2012 à 12:36:40    

bon j'ai pas mal debroussaillé mon terrain
 
dans mon traitement du fichier xml par les methodes du DOM j'ai a un moment à parcourir une branche de mon "arbre xml"
 
l'arbre est comme ceci:
 
root------------ contenu-------------texte
|  |...\                 |  |...\                  |  |...\
 
 
le noeud "contenu" est le 7eme et dernier fils de root
le noeud "texte" est le 3eme et avant-dernier fils de contenu
 
j'ai ecrit une petite fonction (recursive) qui me parcours un arbre de noeud t
 
et j'ai ecrit une ligne de code ainsi:

Code :
  1. var t = obj.responseXML.getElementsByTagName("texte" )[0];


 
au moment de l'appel a ma fonction parcours(t) il me sort une erreure
"objet attendu"
 
si j'ecris ainsi le code

Code :
  1. var t = obj.responseXML.getElementsByTagName("texte" )[0].childNodes[0];


 
ya pas d'erreure mais il me parcourt que la branche ainée du noeud texte
 
enfin si j'ecris ainsi:

Code :
  1. var t = obj.responseXML.getElementsByTagName("contenu" )[0].childNodes[2];


 
j'ai pas d'erreure si texte a sous lui un seul niveau de balises contenant elle même un texte ou rien;
Si il y a plusieurs niveaux il me dit qu'il attend un objet pour pouvoir utiliser t en argument de ma fonction parcours
 
 
 
comment je dois ecrire ma ligne de code pour bien partir du noeud texte et non de son fils ainé?
et obtenir toute la  sous branche sans avoir cette erreure?
 
si quelqu'un sait m'aider , merci d'avance :jap:


Message édité par tintin34 le 18-01-2012 à 14:33:30
Reply

Marsh Posté le 18-01-2012 à 16:33:04    

au cas où en fait le problème serait dans l'ecriture de ma fonction parcours(noeud)
 
je vous donne le debut du code de cette fonction et ce que je souhaite qu'elle fasse:
 
1)je veux affecter à x la liste de tous les enfants de noeud
2)pour chaque enfant de x je veux savoir si il a des enfants
      ---> si oui je rappelle cette fonction sur l'enfant en concatenant sont resultat à chaine
      ---> je traite la feuille en concatenant le resultat à chaine
3)je retourne le resultat du traitement_feuille (sur noeud et chaine)
 
le debut de mon code javascript:

Code :
  1. function parcour_enfants(noeud)
  2. {
  3. if(typeof chaine == 'undefined') {var chaine = '';};
  4. var x = noeud.childNodes;
  5. for (i=0;i<x.length;i++)
  6. {
  7. if(x[i].hasChildNodes())
  8. {chaine += parcours_enfant(x[i]);
  9. }
  10. else
  11. {chaine += parcour_feuille(x[i],chaine)};
  12. };
  13. return parcour_feuille(noeud,chaine);
  14. };


 
l'erreur "objet attendu" serait à la ligne 9 de code caractère 3


Message édité par tintin34 le 18-01-2012 à 16:40:04
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed