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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Résolu] Contenu d'un <div> qui disparraît tout seul.

cybkiller

Un clavier AZERTY en vaut deux

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 :

<div id="menu_tri"></div><div id="formulaire" style="display:inline;"></div><div id="montest" style="display:inline;"></div>
<div id="conteneur">
<ol>
<li id="camelinbdd-ieee10" class="article">
<span class="author"> Nathalie Camelin and Frederic Bechet and Geraldine Damnati and Renato De Mori </span>
<span class="title"> Detection and Interpretation of Opinion Expressions in Spoken Surveys </span>
<span class="journal"> IEEE Transactions on Audio, Speech, and Language Processing </span>
<span class="pages"> Pages : 369-381 </span>
<span class="volume"> Volume : 18:2 </span>
<span class="year"> 2010 </span>
<span class="category"> ACL </span>
<span class="extra"> </span>
</li>
<li id="tur2010trans" class="article">
<span class="author"> Tur, Gokhan and Stolcke, Andreas and Voss, Lynn
and Dowding, John and Favre, Benoit and Fernandez, Raquel and Frampton,
Matthew and Frandsen, Michael and Frederickson, Clint and Graciarena,
Martin and Hakkani-T'ur, Dilek and Kintzing, Donald and Leveque, Kyle
and Mason, Shane and Niekrasz, John and Peters, Stanley and Purver,
Matthew and Riedhammer, Korbinian and Shriberg, Elizabeth and Tien,
JinThe CALO Meeting Assistant System </span>
<span class="title"> The CALO Meeting Assistant System </span>
<span class="journal"> IEEE Transactions on Audio, Speech and Language Processing </span>
<span class="year"> 2010 </span>
<span class="category"> ACL </span>
<span class="extra"> </span>
</li>
<li id="favre2009gdm" class="article">
<span class="author"> Guz, Umit and Favre, Benoit and Hakkani-T'ur, Dilek and Tur, Gokhan </span>
<span class="title"> Generative and Discriminative Methods using Morphological Information for Sentence Segmentation of Turkish </span>
<span class="journal"> IEEE Transactions on Audio, Speech and Language Processing, Special Section on Processing Morphologically Rich Languages </span>
<span class="pages"> Pages : 895-903 </span>
<span class="volume"> Volume : 17 </span>
<span class="number"> Number : 5 </span>
<span class="month"> July </span>
<span class="year"> 2009 </span>
<span class="category"> ACL </span>
<span class="extra"> </span>
</li>
....
*************************
Et qui se termine par :
*************************
....
<li id="kawtrakulz-snlpintro06" class="inbook">
<span class="author"> Asanee Kawtrakul and Michael Zock </span>
<span class="title"> special issue of Transaction on Computer and Information Technology with papers selected from SNLP2005, Papillon2005 </span>
<span class="editor"> Asanee Kawtrakul and Michael Zock </span>
<span class="publisher"> ECTI-CIT </span>
<span class="chapter"> Introduction </span>
<span class="year"> 2006 </span>
<span class="category"> DO </span>
</li> <li id="hernandezmz-jeatala06" class="inbook">
<span class="title"> Aide à la rédaction: apports du Traitement Automatique des Langues </span>
<span class="editor"> Nicolas Hernandez and A. Max and Michael Zock </span>
<span class="publisher"> Actes de la journée d'étude de l'ATALA (3 juin 2006) </span>
<span class="year"> 2006 </span>
<span class="address"> Paris </span>
<span class="category"> DO </span>
</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 :

Noms = new Array("ACL", "ACLN", "ACTI", "ACTN", "AFF", "AP", "DO", "OS", "OV";);
NomsTypes = new Array("article", "book", "inbook", "inproceedings", "misc";);
Classes = new Array("author", "title", "booktitle", "publisher", "pages", "journal", "page", "volume", "number", "month", "year", "address", "category", "extra";);
function affiche_form()
{
formulaire = '<form><label for="formid">Identifiant :</label><input type="text" id="formid" /><br><label for="formclasse">Classe</label><input type="text" id="formclasse" /><br>';
for(i=0; i<Classes.length; i++)
{
formulaire = formulaire+'<label for="form'+Classes[i]+'">'+Classes[i]+'</label><input type="text" id="form'+Classes[i]+'"><br>';
}
formulaire=formulaire+'<input type="submit" value="VALIDER" onclick="new_book();" /></form>';
document.getElementById("formulaire";).innerHTML = formulaire;
}
function new_book()
{
Newnoeud = document.createElement("li";);
Newnoeud.id = document.getElementById("formid";).value;
Newnoeud.class = document.getElementById("formclasse";).value;
for(i=0; i<Classes.length; i++)
{
monspan = document.createElement("span";);
monspan.setAttribute("class", Classes[i]);
nomclasseform = "form"+Classes[i];
monspan.innerHTML = " "+document.getElementById(nomclasseform).value+" ";
Newnoeud.appendChild(monspan);
retourLigne = document.createTextNode("n";);
Newnoeud.appendChild(retourLigne);
}
//alert(Newnoeud.nodeName+'n'+Newnoeud.innerHTML);
//alert(document.getElementsByTagName("li";)[0].parentNode.innerHTML);
montest=Newnoeud.cloneNode(true);
document.getElementById("montest";).appendChild(montest);
alert("001";);
document.getElementsByTagName("ol";)[0].appendChild(Newnoeud);
//alert(document.getElementsByTagName("li";)[0].parentNode.innerHTML);
alert("01";);
}

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

Publicité

vanish

Ce qui brûle, brûle !

Salut,

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

gatsu35

Blablaté par Harko

Faut pas mettre la balise CPP mais la balise code

Code :

<div id="menu_tri"></div><div id="formulaire" style="display:inline;"></div><div id="montest" style="display:inline;"></div>

 <div id="conteneur">
<ol>
 <li id="camelinbdd-ieee10" class="article">
    <span class="author">  Nathalie Camelin and Frederic Bechet and Geraldine Damnati and Renato De Mori  </span>
    <span class="title">  Detection and Interpretation of Opinion Expressions in Spoken Surveys  </span>
    <span class="journal">  IEEE Transactions on Audio, Speech, and Language Processing  </span>
    <span class="pages"> Pages :  369-381  </span>
    <span class="volume"> Volume :  18:2  </span>
    <span class="year">  2010  </span>
    <span class="category">  ACL  </span>
    <span class="extra">  </span>
 </li>
 <li id="tur2010trans" class="article">
    <span class="author">  Tur, Gokhan and Stolcke, Andreas and Voss, Lynn  
and Dowding, John and Favre, Benoit and Fernandez, Raquel and Frampton,  
Matthew and Frandsen, Michael and Frederickson, Clint and Graciarena,  
Martin and Hakkani-T'ur, Dilek and Kintzing, Donald and Leveque, Kyle  
and Mason, Shane and Niekrasz, John and Peters, Stanley and Purver,  
Matthew and Riedhammer, Korbinian and Shriberg, Elizabeth and Tien,  
JinThe CALO Meeting Assistant System  </span>
    <span class="title">  The CALO Meeting Assistant System  </span>
    <span class="journal">  IEEE Transactions on Audio, Speech and Language Processing  </span>
    <span class="year">  2010  </span>
    <span class="category">  ACL  </span>
    <span class="extra">  </span>
 </li>
 <li id="favre2009gdm" class="article">
    <span class="author">  Guz, Umit and Favre, Benoit and Hakkani-T'ur, Dilek and Tur, Gokhan  </span>
    <span class="title">  Generative and Discriminative Methods using Morphological Information for Sentence Segmentation of Turkish  </span>
    <span class="journal">  IEEE Transactions on Audio, Speech and Language Processing, Special Section on Processing Morphologically Rich Languages  </span>
    <span class="pages"> Pages :  895-903  </span>
    <span class="volume"> Volume :  17  </span>
    <span class="number"> Number :  5  </span>
    <span class="month">  July  </span>
    <span class="year">  2009  </span>
    <span class="category">  ACL  </span>
    <span class="extra">  </span>
 </li>
....

*************************
Et qui se termine par :
*************************

....

 <li id="kawtrakulz-snlpintro06" class="inbook">
    <span class="author">  Asanee Kawtrakul and Michael Zock  </span>
    <span class="title">  special issue of Transaction on Computer and Information Technology with papers selected from SNLP2005, Papillon2005  </span>
    <span class="editor">  Asanee Kawtrakul and Michael Zock  </span>
    <span class="publisher">  ECTI-CIT  </span>
    <span class="chapter">  Introduction  </span>
    <span class="year">  2006  </span>
    <span class="category">  DO  </span>
 </li> <li id="hernandezmz-jeatala06" class="inbook">
    <span class="title">  Aide à la rédaction: apports du Traitement Automatique des Langues  </span>
    <span class="editor">  Nicolas Hernandez and A. Max and Michael Zock  </span>
    <span class="publisher">  Actes de la journée d'étude de l'ATALA (3 juin 2006)  </span>
    <span class="year">  2006  </span>
    <span class="address">  Paris  </span>
    <span class="category">  DO  </span>
 </li></ol></div>

Code :

Noms = new Array("ACL", "ACLN", "ACTI", "ACTN", "AFF", "AP", "DO", "OS", "OV" );
NomsTypes = new Array("article", "book", "inbook", "inproceedings", "misc" );
Classes = new Array("author", "title", "booktitle", "publisher", "pages", "journal", "page", "volume", "number", "month", "year", "address", "category", "extra" );
 
 
 
function affiche_form()
{
    formulaire = '<form><label for="formid">Identifiant :</label><input type="text" id="formid" /><br><label for="formclasse">Classe</label><input type="text" id="formclasse" /><br>';
    
    for(i=0; i<Classes.length; i++)
    {
        formulaire = formulaire+'<label for="form'+Classes[i]+'">'+Classes[i]+'</label><input type="text" id="form'+Classes[i]+'"><br>';
    }
    
    formulaire=formulaire+'<input type="submit" value="VALIDER" onclick="new_book();" /></form>';
    
    document.getElementById("formulaire" ).innerHTML = formulaire;
}
 
function new_book()
{
    Newnoeud = document.createElement("li" );
    
    Newnoeud.id = document.getElementById("formid" ).value;
    Newnoeud.class = document.getElementById("formclasse" ).value;
    
    
    for(i=0; i<Classes.length; i++)
    {
        monspan = document.createElement("span" );
        monspan.setAttribute("class", Classes[i]);
        
        nomclasseform = "form"+Classes[i];
        monspan.innerHTML = "  "+document.getElementById(nomclasseform).value+"  ";
        
        Newnoeud.appendChild(monspan);
        
        retourLigne = document.createTextNode("n" );
        Newnoeud.appendChild(retourLigne);
    }
    
    //alert(Newnoeud.nodeName+'n'+Newnoeud.innerHTML);
    
    //alert(document.getElementsByTagName("li" )[0].parentNode.innerHTML);
    
    montest=Newnoeud.cloneNode(true);
    document.getElementById("montest" ).appendChild(montest);
    
    alert("001" );
    
    document.getElementsByTagName("ol" )[0].appendChild(Newnoeud);
    //alert(document.getElementsByTagName("li" )[0].parentNode.innerHTML);
    
 
    alert("01" );
}

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

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

vanish

Ce qui brûle, brûle !

edit suite a edit au dessus

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

gatsu35

Blablaté par Harko

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

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

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

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

cybkiller

Un clavier AZERTY en vaut deux

@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

vanish

Ce qui brûle, brûle !

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

cybkiller

Un clavier AZERTY en vaut deux

Salut,

Code :

[47] montest=Newnoeud.cloneNode(true);
[48] document.getElementById("montest" ).appendChild(montest);
[49]
[50] alert("001" );
[51]
[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

cybkiller

Un clavier AZERTY en vaut deux

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

vanish

Ce qui brûle, brûle !

Salut,

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

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

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
Centrer le contenu d'un div	[Shell] comparaison mot contenu de fichier
[Perl / JS] [contourné] récupérer le contenu d'une variable JS	[SimpleXML] Modification du contenu
[C#] Enregistrer contenu textbox dans un fichier	[Résolu] Changer le contenu d'une page html
Afficher/supprimer le contenu d'une bdd en fonction d'un id précis	[Android] Afficer le contenu d'un tableau
[JS] multiples changement de classes sur un seul onmouseover	afficher le contenu d'une var d'env
Plus de sujets relatifs à : [Résolu] Contenu d'un <div> qui disparraît tout seul.

Page générée en 0.150 secondes