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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [js] mettre a jour des divs créées dynamiquement

bixibu

Ca ... c'est fait!

Hello, j'ai un probleme !

Dans ma page, a un moment je créé dynamiquement des divs a partir d'un array:

Code :

<div class="conteneur_mots" >
<input onclick="sorrt();" type="checkbox" name="boutonsort" id="boutonsort" value="sort" />
<script type="text/javascript">
var x;
for (x=0; x<= Mesmots.length ;x++){
document.write('<div id="en'+x+'" style="visibility:visible" class="en">'+Mesmots[x][0]+'</div>');
document.write('<div id="fr'+x+'" style="visibility:visible" class="fr">'+Mesmots[x][1]+'</div>');
}
</script>
</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 :

var Mesmots2 = new Array().concat(Mesmots.sort());
function sorrt(){
if (document.getElementById('boutonsort').checked){
for (x=0; x<= Mesmots2.length ;x++){
document.GetElementById('fr'+x).innerHTML= Mesmots2[x][0];
document.GetElementById('fr'+x).innerHTML= Mesmots2[x][1];
}
}
else{
for (x=0; x<= Mesmots.length ;x++){
document.GetElementById('fr'+x).innerHTML= Mesmots[x][0];
document.GetElementById('fr'+x).innerHTML= Mesmots[x][1];
}
}
}

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

Publicité

FlorentG

Unité de Masse

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é

anapajari

s/travail/glanding on hfr/gs;

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 :

document.GetElementById('fr'+x).innerHTML= Mesmots[x][0];
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

bixibu

Ca ... c'est fait!

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 :

<script js blabla>
var Mesmots = new Array();
var nb;
nb = '0';
<?
$file="dico.txt";
if (is_file($file)){
$contenu = fread(fopen($file, "r" ), filesize($file));
$entree = explode('<br>', $contenu);
$nb =count($entree)-1;
for ($i=0;$i<=$nb-1;$i++){
$fr_en = explode('<:>',$entree[$i]);
echo "Mesmots[$i] = new Array(2);";
echo "Mesmots[$i][0] ='".$fr_en[0]."';".chr(13);
echo "Mesmots[$i][1] ='".$fr_en[1]."';".chr(13);
}
echo "nb=".$nb.";";
}
?>
et mes fonctions...
</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 :

document.GetElementById('fr'+x).innerHTML= Mesmots[x][0];
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

bixibu

Ca ... c'est fait!

Code :

<div class="conteneur_mots" id="conteneur_mots" onclick="sho_hide_all();">
<script type="text/javascript">
var x;
for (x=0; x<= Mesmots.length ;x++){
// recherche du noeud parent
var divParent = document.getElementById('conteneur_mots');
// création des nouveaux noeuds
var newdiv_en = document.createElement('div');
var newdiv_fr = document.createElement('div');
// paramétrage des nouveaux noeuds
newdiv_en.id = 'en'+x;
newdiv_en.class = 'en';
newdiv_fr.id = 'fr'+x;
newdiv_fr.class = 'fr';
// raccord des noeuds
divParent.appendChild(newdiv_en);
divParent.appendChild(newdiv_fr);
document.getElementById('en'+x).InnerHTML = Mesmots[x][0];
document.getElementById('fr'+x).InnerHTML = Mesmots[x][1];
}
</script>
</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

anapajari

s/travail/glanding on hfr/gs;

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

Code :

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

bixibu

Ca ... c'est fait!

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 :

newdiv_en.appendChild(document.createTextElement(Mesmots[x][0]));
newdiv_fr.appendChild(document.createTextElement(Mesmots[x][1]));
avant:
/* document.getElementById('en'+x).InnerHTML = Mesmots[x][0];
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

anapajari

s/travail/glanding on hfr/gs;

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

bixibu

Ca ... c'est fait!

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?
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

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
probléme de mise a jour	Mise a jour de site
[C# .net] Créer des webcontrol dynamiquement => probleme avec les ID	Mettre à disposition du XML dynamiquement (et comment le lire)
Mettre une combo box et l'effacer fait grossir la taille du .swf??	Mettre des lignes en colonnes
BLACKLIST - LISTE NOIR d'adresse IP à mettre sur vos site internet	[RESOLU]Mettre à jour eclipse
Plus de sujets relatifs à : [js] mettre a jour des divs créées dynamiquement

Page générée en 0.075 secondes