[Résolu] Contenu d'un <div> qui disparraît tout seul.

Contenu d'un <div> qui disparraît tout seul. [Résolu] - HTML/CSS - Programmation

Marsh Posté le 30-04-2011 à 14:07:25    

Salut à vous,  
 
J'ai un tp à rendre dans peu de temps et je suis bloqué sur une des questions.
Le but du projet est d'organiser des éléments d'une page web qui contient des Livres sous forme de liste.
J'ai mis le fichier .htm en ligne à l'adresse suivante : ex5.htm
La structure des listes est la suivante :
 

Code :
  1. <div id="menu_tri"></div><div id="formulaire" style="display:inline;"></div><div id="montest" style="display:inline;"></div>
  3. <div id="conteneur">
  4. <ol>
  5. <li id="camelinbdd-ieee10" class="article">
  6.     <span class="author">  Nathalie Camelin and Frederic Bechet and Geraldine Damnati and Renato De Mori  </span>
  7.     <span class="title">  Detection and Interpretation of Opinion Expressions in Spoken Surveys  </span>
  8.     <span class="journal">  IEEE Transactions on Audio, Speech, and Language Processing  </span>
  9.     <span class="pages"> Pages :  369-381  </span>
  10.     <span class="volume"> Volume :  18:2  </span>
  11.     <span class="year">  2010  </span>
  12.     <span class="category">  ACL  </span>
  13.     <span class="extra">  </span>
  14. </li>
  15. <li id="tur2010trans" class="article">
  16.     <span class="author">  Tur, Gokhan and Stolcke, Andreas and Voss, Lynn
  17. and Dowding, John and Favre, Benoit and Fernandez, Raquel and Frampton,
  18. Matthew and Frandsen, Michael and Frederickson, Clint and Graciarena,
  19. Martin and Hakkani-T'ur, Dilek and Kintzing, Donald and Leveque, Kyle
  20. and Mason, Shane and Niekrasz, John and Peters, Stanley and Purver,
  21. Matthew and Riedhammer, Korbinian and Shriberg, Elizabeth and Tien,
  22. JinThe CALO Meeting Assistant System  </span>
  23.     <span class="title">  The CALO Meeting Assistant System  </span>
  24.     <span class="journal">  IEEE Transactions on Audio, Speech and Language Processing  </span>
  25.     <span class="year">  2010  </span>
  26.     <span class="category">  ACL  </span>
  27.     <span class="extra">  </span>
  28. </li>
  29. <li id="favre2009gdm" class="article">
  30.     <span class="author">  Guz, Umit and Favre, Benoit and Hakkani-T'ur, Dilek and Tur, Gokhan  </span>
  31.     <span class="title">  Generative and Discriminative Methods using Morphological Information for Sentence Segmentation of Turkish  </span>
  32.     <span class="journal">  IEEE Transactions on Audio, Speech and Language Processing, Special Section on Processing Morphologically Rich Languages  </span>
  33.     <span class="pages"> Pages :  895-903  </span>
  34.     <span class="volume"> Volume :  17  </span>
  35.     <span class="number"> Number :  5  </span>
  36.     <span class="month">  July  </span>
  37.     <span class="year">  2009  </span>
  38.     <span class="category">  ACL  </span>
  39.     <span class="extra">  </span>
  40. </li>
  41. ....
  43. *************************
  44. Et qui se termine par :
  45. *************************
  47. ....
  49. <li id="kawtrakulz-snlpintro06" class="inbook">
  50.     <span class="author">  Asanee Kawtrakul and Michael Zock  </span>
  51.     <span class="title">  special issue of Transaction on Computer and Information Technology with papers selected from SNLP2005, Papillon2005  </span>
  52.     <span class="editor">  Asanee Kawtrakul and Michael Zock  </span>
  53.     <span class="publisher">  ECTI-CIT  </span>
  54.     <span class="chapter">  Introduction  </span>
  55.     <span class="year">  2006  </span>
  56.     <span class="category">  DO  </span>
  57. </li> <li id="hernandezmz-jeatala06" class="inbook">
  58.     <span class="title">  Aide à la rédaction: apports du Traitement Automatique des Langues  </span>
  59.     <span class="editor">  Nicolas Hernandez and A. Max and Michael Zock  </span>
  60.     <span class="publisher">  Actes de la journée d'étude de l'ATALA (3 juin 2006)  </span>
  61.     <span class="year">  2006  </span>
  62.     <span class="address">  Paris  </span>
  63.     <span class="category">  DO  </span>
  64. </li></ol></div>


Je bloque sur l'ajout de nouvelle œuvre; en effet tout semble fonctionner hormis que l’œuvre ajoutée disparait toute seule ...
Code Js de la fonction qui ajoute une œuvre :
 

Code :
  1. Noms = new Array("ACL", "ACLN", "ACTI", "ACTN", "AFF", "AP", "DO", "OS", "OV";);
  2. NomsTypes = new Array("article", "book", "inbook", "inproceedings", "misc";);
  3. Classes = new Array("author", "title", "booktitle", "publisher", "pages", "journal", "page", "volume", "number", "month", "year", "address", "category", "extra";);
  7. function affiche_form()
  8. {
  9.     formulaire = '<form><label for="formid">Identifiant :</label><input type="text" id="formid" /><br><label for="formclasse">Classe</label><input type="text" id="formclasse" /><br>';
  10.    
  11.     for(i=0; i<Classes.length; i++)
  12.     {
  13.         formulaire = formulaire+'<label for="form'+Classes[i]+'">'+Classes[i]+'</label><input type="text" id="form'+Classes[i]+'"><br>';
  14.     }
  15.    
  16.     formulaire=formulaire+'<input type="submit" value="VALIDER" onclick="new_book();" /></form>';
  17.    
  18.     document.getElementById("formulaire";).innerHTML = formulaire;
  19. }
  21. function new_book()
  22. {
  23.     Newnoeud = document.createElement("li";);
  24.    
  25.     Newnoeud.id = document.getElementById("formid";).value;
  26.     Newnoeud.class = document.getElementById("formclasse";).value;
  27.    
  28.    
  29.     for(i=0; i<Classes.length; i++)
  30.     {
  31.         monspan = document.createElement("span";);
  32.         monspan.setAttribute("class", Classes[i]);
  33.        
  34.         nomclasseform = "form"+Classes[i];
  35.         monspan.innerHTML = "  "+document.getElementById(nomclasseform).value+"  ";
  36.        
  37.         Newnoeud.appendChild(monspan);
  38.        
  39.         retourLigne = document.createTextNode("n";);
  40.         Newnoeud.appendChild(retourLigne);
  41.     }
  42.    
  43.     //alert(Newnoeud.nodeName+'n'+Newnoeud.innerHTML);
  44.    
  45.     //alert(document.getElementsByTagName("li";)[0].parentNode.innerHTML);
  46.    
  47.     montest=Newnoeud.cloneNode(true);
  48.     document.getElementById("montest";).appendChild(montest);
  49.    
  50.     alert("001";);
  51.    
  52.     document.getElementsByTagName("ol";)[0].appendChild(Newnoeud);
  53.     //alert(document.getElementsByTagName("li";)[0].parentNode.innerHTML);
  54.    
  56.     alert("01";);
  57. }


Il est à noter que je rajoute l'oeuvre aussi dans le <div id=\"montest\"></div> (cf premier code) pour vérifier que l'ajout fonctionne correctement (ce qui est le cas).
Les alert() servent à faire des pauses pour ne pas que tout disparaisse immédiatement.
 
Auriez-vous une idée de ce qui ne fonctionne pas, ou de ce que j'ai mal fait ?
En vous remerciant d'avance.
 
 
edit1: Le forum semble rajouter des point-virgule à la fin de certains éléments qui se trouvent entre guillemets, ce qui n'est pas le cas sur le code original.


Message édité par cybkiller le 03-05-2011 à 03:19:57
Reply

Marsh Posté le 30-04-2011 à 14:07:25   

Reply

Marsh Posté le 30-04-2011 à 21:43:39    

Salut,
 
ligne 52, ça ne doit pas être le forum qui a mis un v à la place du w :D ;)

Reply

Marsh Posté le 01-05-2011 à 09:08:57    

Faut pas mettre la balise CPP mais la balise code
 

Code :
  1. <div id="menu_tri"></div><div id="formulaire" style="display:inline;"></div><div id="montest" style="display:inline;"></div> 
  2.  
  3.  <div id="conteneur"> 
  4. <ol> 
  5.  <li id="camelinbdd-ieee10" class="article"> 
  6.     <span class="author">  Nathalie Camelin and Frederic Bechet and Geraldine Damnati and Renato De Mori  </span> 
  7.     <span class="title">  Detection and Interpretation of Opinion Expressions in Spoken Surveys  </span> 
  8.     <span class="journal">  IEEE Transactions on Audio, Speech, and Language Processing  </span> 
  9.     <span class="pages"> Pages :  369-381  </span> 
  10.     <span class="volume"> Volume :  18:2  </span> 
  11.     <span class="year">  2010  </span> 
  12.     <span class="category">  ACL  </span> 
  13.     <span class="extra">  </span> 
  14.  </li> 
  15.  <li id="tur2010trans" class="article"> 
  16.     <span class="author">  Tur, Gokhan and Stolcke, Andreas and Voss, Lynn  
  17. and Dowding, John and Favre, Benoit and Fernandez, Raquel and Frampton,  
  18. Matthew and Frandsen, Michael and Frederickson, Clint and Graciarena,  
  19. Martin and Hakkani-T'ur, Dilek and Kintzing, Donald and Leveque, Kyle  
  20. and Mason, Shane and Niekrasz, John and Peters, Stanley and Purver,  
  21. Matthew and Riedhammer, Korbinian and Shriberg, Elizabeth and Tien,  
  22. JinThe CALO Meeting Assistant System  </span> 
  23.     <span class="title">  The CALO Meeting Assistant System  </span> 
  24.     <span class="journal">  IEEE Transactions on Audio, Speech and Language Processing  </span> 
  25.     <span class="year">  2010  </span> 
  26.     <span class="category">  ACL  </span> 
  27.     <span class="extra">  </span> 
  28.  </li> 
  29.  <li id="favre2009gdm" class="article"> 
  30.     <span class="author">  Guz, Umit and Favre, Benoit and Hakkani-T'ur, Dilek and Tur, Gokhan  </span> 
  31.     <span class="title">  Generative and Discriminative Methods using Morphological Information for Sentence Segmentation of Turkish  </span> 
  32.     <span class="journal">  IEEE Transactions on Audio, Speech and Language Processing, Special Section on Processing Morphologically Rich Languages  </span> 
  33.     <span class="pages"> Pages :  895-903  </span> 
  34.     <span class="volume"> Volume :  17  </span> 
  35.     <span class="number"> Number :  5  </span> 
  36.     <span class="month">  July  </span> 
  37.     <span class="year">  2009  </span> 
  38.     <span class="category">  ACL  </span> 
  39.     <span class="extra">  </span> 
  40.  </li> 
  41. .... 
  42.  
  43. ************************* 
  44. Et qui se termine par : 
  45. ************************* 
  46.  
  47. .... 
  48.  
  49.  <li id="kawtrakulz-snlpintro06" class="inbook"> 
  50.     <span class="author">  Asanee Kawtrakul and Michael Zock  </span> 
  51.     <span class="title">  special issue of Transaction on Computer and Information Technology with papers selected from SNLP2005, Papillon2005  </span> 
  52.     <span class="editor">  Asanee Kawtrakul and Michael Zock  </span> 
  53.     <span class="publisher">  ECTI-CIT  </span> 
  54.     <span class="chapter">  Introduction  </span> 
  55.     <span class="year">  2006  </span> 
  56.     <span class="category">  DO  </span> 
  57.  </li> <li id="hernandezmz-jeatala06" class="inbook"> 
  58.     <span class="title">  Aide à la rédaction: apports du Traitement Automatique des Langues  </span> 
  59.     <span class="editor">  Nicolas Hernandez and A. Max and Michael Zock  </span> 
  60.     <span class="publisher">  Actes de la journée d'étude de l'ATALA (3 juin 2006)  </span> 
  61.     <span class="year">  2006  </span> 
  62.     <span class="address">  Paris  </span> 
  63.     <span class="category">  DO  </span> 
  64.  </li></ol></div>


 

Code :
  1. Noms = new Array("ACL", "ACLN", "ACTI", "ACTN", "AFF", "AP", "DO", "OS", "OV" );
  2. NomsTypes = new Array("article", "book", "inbook", "inproceedings", "misc" );
  3. Classes = new Array("author", "title", "booktitle", "publisher", "pages", "journal", "page", "volume", "number", "month", "year", "address", "category", "extra" );
  4.  
  5.  
  6.  
  7. function affiche_form()
  8. {
  9.     formulaire = '<form><label for="formid">Identifiant :</label><input type="text" id="formid" /><br><label for="formclasse">Classe</label><input type="text" id="formclasse" /><br>';
  10.     
  11.     for(i=0; i<Classes.length; i++)
  12.     {
  13.         formulaire = formulaire+'<label for="form'+Classes[i]+'">'+Classes[i]+'</label><input type="text" id="form'+Classes[i]+'"><br>';
  14.     }
  15.     
  16.     formulaire=formulaire+'<input type="submit" value="VALIDER" onclick="new_book();" /></form>';
  17.     
  18.     document.getElementById("formulaire" ).innerHTML = formulaire;
  19. }
  20.  
  21. function new_book()
  22. {
  23.     Newnoeud = document.createElement("li" );
  24.     
  25.     Newnoeud.id = document.getElementById("formid" ).value;
  26.     Newnoeud.class = document.getElementById("formclasse" ).value;
  27.     
  28.     
  29.     for(i=0; i<Classes.length; i++)
  30.     {
  31.         monspan = document.createElement("span" );
  32.         monspan.setAttribute("class", Classes[i]);
  33.         
  34.         nomclasseform = "form"+Classes[i];
  35.         monspan.innerHTML = "  "+document.getElementById(nomclasseform).value+"  ";
  36.         
  37.         Newnoeud.appendChild(monspan);
  38.         
  39.         retourLigne = document.createTextNode("n" );
  40.         Newnoeud.appendChild(retourLigne);
  41.     }
  42.     
  43.     //alert(Newnoeud.nodeName+'n'+Newnoeud.innerHTML);
  44.     
  45.     //alert(document.getElementsByTagName("li" )[0].parentNode.innerHTML);
  46.     
  47.     montest=Newnoeud.cloneNode(true);
  48.     document.getElementById("montest" ).appendChild(montest);
  49.     
  50.     alert("001" );
  51.     
  52.     document.getElementsByTagName("ol" )[0].appendChild(Newnoeud);
  53.     //alert(document.getElementsByTagName("li" )[0].parentNode.innerHTML);
  54.     
  55.  
  56.     alert("01" );
  57. }


Message édité par gatsu35 le 01-05-2011 à 09:43:14

---------------
Blablaté par Harko
Reply

Marsh Posté le 01-05-2011 à 09:28:39    

edit suite a edit au dessus


Message édité par vanish le 01-05-2011 à 21:22:40
Reply

Marsh Posté le 01-05-2011 à 09:40:29    

Arf j'ai pas vu l'edit :D, j'ai édité en mettant la balise code :o, merci :D

 

Bon dans ton fichier HTML que tu as fourni ya un peu nawak :
Pas de doctype sur la page, le doctype est dans la balise body. C'est assez étrange :D


Message édité par gatsu35 le 01-05-2011 à 09:48:51

---------------
Blablaté par Harko
Reply

Marsh Posté le 01-05-2011 à 13:39:50    

@Vanish:
Salut, j'ai regardé mais je ne vois pas de "v" à la place de "w" :(

 

@Gatsu35:
Fait :) Merci pour l'info !
Et sinon, le coup du doctype dans le body ça ne vient pas de moi : J'ai reçu la page sans JS et je ne peux pas la modifier directement sans utiliser JS (objet du TP); bon hormis le fait de rajouter des <div>, ça je pense que j'ai le droit :)

 

Sinon, je bloque toujours dessus. Avez vous des idées ?


Message édité par cybkiller le 01-05-2011 à 14:49:53
Reply

Marsh Posté le 01-05-2011 à 21:23:18    

Je t'ai donné la ligne ... y a pas 36 v dedans.

 

N° de ligne de ton javascript sur ton premier post

 


PS : ligne 47 également d'ailleurs, ta variable newnoeud devient nevnoeud


Message édité par vanish le 01-05-2011 à 21:24:44
Reply

Marsh Posté le 02-05-2011 à 11:32:40    

Salut,

 
Code :
  1. [47]    montest=Newnoeud.cloneNode(true);
  2. [48]    document.getElementById("montest" ).appendChild(montest);
  3. [49] 
  4. [50]    alert("001" );
  5. [51] 
  6. [52]    document.getElementsByTagName("ol" )[0].appendChild(Newnoeud);
 

Pas de "v" là dedans, juste des "w" :( . Après, j'ai peut être un bug graphique mais, je ne les vois pas en tant que "v" ...

 

Sinon, je suis toujours en train de chercher la cause de ma disparition de div, si quelqu'un a une (des?) idée(s) je suis preneur :)


Message édité par cybkiller le 02-05-2011 à 11:33:26
Reply

Marsh Posté le 03-05-2011 à 03:19:32    

Salut à vous !
 
Problème résolu. Pour ceux que ça interesse :
 
Le bouton qui validait le formulaire était de type="submit" ce qui fait qu'il rechargeait la page à chaque click. Il fallait le mettre de type="button".
Comme certains le remarqueront, j'ai effectivement omis de poster cette section de code la pensant hors de cause, comme quoi !
 
Merci quand même;
En espérant que ma bêtise serve :)

Reply

Marsh Posté le 03-05-2011 à 09:03:00    

Salut,

 

:whistle: désolé pr le v / w j'étais pas sur mon pc et une résolution pourrie floutait les lettres :D

 

Pour ta solution, il vaut mieux laisser le bouton submit et renvoyer false au onsubmit (ou e.preventDefault() puisse que tu utilise jquery), puis à la suite traiter ton form comme tu le souhaite, en ajax je suppose.

 

Car il me semble (je peux me tromper je suis plus sur) que avec button on ne peut pas valider le form directement par la touche Enter. Ce qui pose des problemes d'accessibilité, et d'ergonomie pr ceux qui ont l'habitude de naviguer au clavier.


Message édité par vanish le 03-05-2011 à 09:03:43
Reply

Sujets relatifs:

Leave a Replay

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