[js] mettre a jour des divs créées dynamiquement

mettre a jour des divs créées dynamiquement [js] - HTML/CSS - Programmation

Marsh Posté le 13-12-2006 à 10:48:53    

Hello, j'ai un probleme !
 
Dans ma page, a un moment je créé dynamiquement des divs a partir d'un array:
 

Code :
  1. <div class="conteneur_mots" >
  2.                       <input  onclick="sorrt();" type="checkbox" name="boutonsort" id="boutonsort" value="sort" />
  3.    <script type="text/javascript">
  4.    var x;
  5.     for (x=0; x<= Mesmots.length ;x++){
  6.      document.write('<div id="en'+x+'" style="visibility:visible" class="en">'+Mesmots[x][0]+'</div>');
  7.      document.write('<div id="fr'+x+'" style="visibility:visible" class="fr">'+Mesmots[x][1]+'</div>');
  8.     }
  9.    </script>
  10.   </div>


 
J'aimerais que lorsque je clique sur un bouton chekbox ca me change l'affichage (affichage trier alphabetiquement)et le restitue (affichage normal) la fonction onclick de ce bouton serait:
 

Code :
  1. var Mesmots2 = new Array().concat(Mesmots.sort());
  2. function sorrt(){
  3. if (document.getElementById('boutonsort').checked){
  4.  for (x=0; x<= Mesmots2.length ;x++){
  5.   document.GetElementById('fr'+x).innerHTML= Mesmots2[x][0];
  6.                         document.GetElementById('fr'+x).innerHTML= Mesmots2[x][1];
  7.   }
  8. }
  9. else{
  10.  for (x=0; x<= Mesmots.length ;x++){
  11.    document.GetElementById('fr'+x).innerHTML= Mesmots[x][0];
  12.    document.GetElementById('fr'+x).innerHTML= Mesmots[x][1];
  13.   }
  14. }
  15. }


 
Or on dirait que innerHTML ne marche pas.. que faire? ou me suis je planté?  
 
merci


Message édité par bixibu le 13-12-2006 à 10:50:14
Reply

Marsh Posté le 13-12-2006 à 10:48:53   

Reply

Marsh Posté le 13-12-2006 à 11:05:13    

getElementById déjà.
 
Et pis document.write ne doit absolument plus être utilisé, c'est ça qui peut causer des problèmes : on sait pas vraiment où on écrit, le DOM risque d'être complètement chamboulé

Reply

Marsh Posté le 13-12-2006 à 11:05:40    

Dans l'ordre je dirais:
- le document.write are 3vil, pourquoi ne pas utiliser le dom
- comment est défini ton tableau Mesmots? Tu es sur que la variable est globale ?
- getElementById ne prends pas de G majuscule ( correctement écrit ligne 3 mais pas en dessous)
- Enfin qu'essaye tu de faire avec:

Code :
  1. document.GetElementById('fr'+x).innerHTML= Mesmots[x][0];
  2. document.GetElementById('fr'+x).innerHTML= Mesmots[x][1];


Ce qui est sur, c'est que seule la 2eme instruction sera "visible"...

 

edit: [:benou_grilled] , FlorentG rulez


Message édité par anapajari le 13-12-2006 à 11:06:20
Reply

Marsh Posté le 13-12-2006 à 13:24:20    


Citation :

- le document.write are 3vil, pourquoi ne pas utiliser le dom


 
Ok pour document.write.. j'avais deja vu quelques bugs en l'utilisant, je suis fixé.
Pour le DOM, je m'y suis pas encore trop penché.. je vais voir si c'est pas trop chiant a aborder  ;)  
 

Citation :

- comment est défini ton tableau Mesmots? Tu es sur que la variable est globale ?


Hum.. bon la je vais surement me faire massacrer.. quoi que je sais pas.. ce tableau JS est issu de la recuperation via php de donnes dans un fichier.. donc :

Code :
  1. <script js blabla>
  2. var Mesmots = new Array();
  3. var nb;
  4. nb = '0';
  5. <?  
  6. $file="dico.txt";
  7. if (is_file($file)){
  8. $contenu = fread(fopen($file, "r" ), filesize($file));
  9. $entree = explode('<br>', $contenu);
  10. $nb =count($entree)-1;
  11. for ($i=0;$i<=$nb-1;$i++){
  12.  $fr_en = explode('<:>',$entree[$i]);
  13.  echo "Mesmots[$i] = new Array(2);";
  14.  echo "Mesmots[$i][0] ='".$fr_en[0]."';".chr(13);
  15.  echo "Mesmots[$i][1] ='".$fr_en[1]."';".chr(13);
  16. }
  17. echo "nb=".$nb.";";
  18. }
  19. ?>
  20. et mes fonctions...
  21. </script>


et oui, aucun doute c'est un tableau global, toute mes autres fonctions js marchent parfaitement
 

Citation :

- Enfin qu'essaye tu de faire avec:

Code :
  1. document.GetElementById('fr'+x).innerHTML= Mesmots[x][0];
  2. document.GetElementById('fr'+x).innerHTML= Mesmots[x][1];


Ce qui est sur, c'est que seule la 2eme instruction sera "visible"...


 
exact mais l'erreur n'es presente que sur le forum :)
 
 
Merci a vous 2, je vais virer les doc.write et je vous tiens au courant
 

Reply

Marsh Posté le 13-12-2006 à 13:48:15    

Code :
  1. <div class="conteneur_mots" id="conteneur_mots" onclick="sho_hide_all();">
  2.    <script type="text/javascript">
  3.    var x;
  4.     for (x=0; x<= Mesmots.length ;x++){
  6.      // recherche du noeud parent
  7.      var divParent = document.getElementById('conteneur_mots');
  9.      // création des nouveaux noeuds
  10.      var newdiv_en = document.createElement('div');
  11.      var newdiv_fr = document.createElement('div');
  13.      // paramétrage des nouveaux noeuds      
  14.      newdiv_en.id = 'en'+x;
  15.      newdiv_en.class = 'en';
  16.      newdiv_fr.id = 'fr'+x;
  17.      newdiv_fr.class = 'fr';
  19.      // raccord des noeuds
  20.      divParent.appendChild(newdiv_en);
  21.      divParent.appendChild(newdiv_fr);
  23.      document.getElementById('en'+x).InnerHTML = Mesmots[x][0];
  24.      document.getElementById('fr'+x).InnerHTML = Mesmots[x][1];
  25.     }
  26.    </script>
  27.   </div>


 
newdiv_en.class = 'en'; a l'air de buger? on fait pas comme ca pour renseigner la class?
edit: ok c'est ClassName.. merci google
edit2: fuck, rin ne s'affiche :(
Sinon ca semble bon? meilleur qu'avant?
Ca du DOM ca?
 
Merci :)


Message édité par bixibu le 13-12-2006 à 13:53:29
Reply

Marsh Posté le 13-12-2006 à 13:56:38    

className au lieu de class
et plutot que d'utiliser innerHTML:

Code :
  1. newdiv_fr.appendChild(document.createTextElement(Mesmots[x][0]));

Reply

Marsh Posté le 13-12-2006 à 14:04:46    

Hum IE me dit que cet element ne prends pas en charge cette methode.. et sa ne m'affiche plus rien du tout :/
 
jai remplacé comme ceci :

Code :
  1. newdiv_en.appendChild(document.createTextElement(Mesmots[x][0]));
  2. newdiv_fr.appendChild(document.createTextElement(Mesmots[x][1]));
  4. avant:
  6. /* document.getElementById('en'+x).InnerHTML = Mesmots[x][0];
  7. document.getElementById('fr'+x).InnerHTML = Mesmots[x][1]; */


 
Avec la technique davant je vois les divs a lecran mais pas leur texte ... :(
Avec la tienne, je ne vois meme plus les divs


Message édité par bixibu le 13-12-2006 à 14:05:36
Reply

Marsh Posté le 13-12-2006 à 14:19:27    

createTextNode au lieu de createTextElement, j'ai bouletté!

Reply

Marsh Posté le 13-12-2006 à 14:20:03    

ce n'est pas  
 

Citation :

newdiv_fr.appendChild(document.createTextElement(Mesmots[x][1]));


 
mais
 

Citation :

newdiv_fr.appendChild(document.createTextNode(Mesmots[x][1]));


 
Si c'est moi qui corrige les pros de cette section je gagne quoi? :p
En tous cas ca a l'air de marcher, merci§
 
edit:grilled de 30s .. tu as de la chance


Message édité par bixibu le 13-12-2006 à 14:21:24
Reply

Sujets relatifs:

Leave a Replay

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