Discussion :

[Molos]

Bonjour tout le monde

Voila, j'ai un bug depuis hier avec le DOM sous Opéra que je n'arrive pas du tous à résoudre, et ce code marche très bien sous IE et FF

Donc voila, j'ai une fonction qui me génère un textarea dans un élement, et voilà le code que j'utilise :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
function getElement(el){
	return document.getElementById(el);
}
 
function createForm(type,parent,content,size){
            return "<div id='ed'><textarea cols='"+size[1]/2+"' onkeyup='adaptRows(this);' id='edition' >"+content+"</textarea><input type='button' value='Close' onclick=\"closeForm('"+parent+"');\" /></div>";
}
 
var content = adaptText(getElement(el).innerHTML,true);
getElement(el).innerHTML = "";
getElement(el).innerHTML += createForm(type,el,content,size);

Donc voilà, jusque là, je n'ai aucun problème, mon textarea s'affiche bien, avec le contenu et tous le reste

Mais voila, ensuite j'ai une fonction qui me permet de détruire le textarea, et c'est là que se pose le problème ,voici les fonctions :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function deleteEl(element,parent){
 
	var el = document.getElementById(element);
 
	var list = document.getElementById(parent);
 
	list.removeChild(el);
}
 
function closeForm(el){
          var contenu = getElement('edition').value;
          deleteEl('ed',el);
          getElement('test').innerHTML = "";
}

Et là, tous va bien, sauf que dans mon élement test, il m'affiche le text undefined pour une raison inconnu
Mais cependant, il m'a bien supprimer le div ed qui avait été génerer par la fonction createForm.

Cependant, maintenant si j'utilise ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
function closeForm(el){
		var contenu = getElement('edition').value;
		deleteEl('ed',el);
		getElement('test').innerHTML = "";
		getElement('test').innerHTML = "a";
	}

Tout mon div ed qui avait été préalablement supprimer refait son apparition dans le dom, et donc le a se retrouve dans le textarea

Et j'ai fait des test, en mettant un alert dans la fonction deleteEl, et il s'affiche bien, la fonction est bien appelé.

Voila, merci d'avance

PS : Ce bug n'arrive que sous Opéra

[d-Rek]

Moi j'utilise du C4, c'est très efficace

Tu ne crées pas tes éléments comme il faudrait et ensuite tu voudrais le supprimer.. Ouch !

Créez un lien sur une image en DOM : (comme il faut)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var newlink=document.createElement('a');
newlink.setAttribute('href', tab[0]);
newlink.setAttribute('title', tab[1]);
newlink.setAttribute('target', '_blank');
var newimg=document.createElement('img');
newimg.setAttribute('src', tab[2]);
newimg.setAttribute('id', id);
if(IE){
	newimg.style.setAttribute('cssText', 'border:0px;');
}else{
	newimg.setAttribute('style', 'border:0px;');
}
newlink.appendChild(newimg);
$(div).appendChild(newlink);

Tu vois un peu le genre ? Effectivement, c'est plus galère qu'un innerHTML
Ensuite la suppression ne devrait pas poser de problème

[Molos]

Ok, merci beaucoup pour cette réponse

Je teste ça de suite

Edit : Voila, j'ai donc modifié un peut mon code

Et donc voila, je me retrouve avec ça comme code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
function createEl(type,parent,id,content){
	var el = document.createElement(type);
	el.setAttribute('id',id);
	el.innerHTML = content;
	getElement(parent).appendChild(el);
	return getElement(id);
}
 
 
function createForm(type,parent,content,size){
var content = "<textarea cols='"+size[1]/2+"' onkeyup='adaptRows(this);' id='edition' >"+content+"</textarea><input type='button' value='Close' onclick=\"closeForm('"+parent+"');\" />";
createEl('div',parent,'ed',content);
element = getElement('ed');
}
 
getElement(el).innerHTML = ""; 		
createForm(type,el,content,size);

Et j'ai aussi modifier mon closeForm afin d'éviter un nouveau innerHTML, j'ai donc maintenant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
function closeForm(el){
		var contenu = getElement('edition').value;
		deleteEl('ed',el);
		getElement(el).appendChild(document.createTextNode(contenu));
 
}

Mais le problème est toujours le même, ça ne marche pas sous Opera, le contenu de ma variable contenu se retrouve toujours dans un textarea qui à disparu lors de l'appelle de le fonction deletEl.

Et aussi, est-il possible de dire au navigateur que le contenu à afficher dans un createTextNode c'est du HTML à afficher et non du texte brut ?

[Shinuza]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
var newimg=document.createElement('img');
newimg.setAttribute('src', tab[2]);
newimg.setAttribute('id', id);
if(IE){
	newimg.style.setAttribute('cssText', 'border:0px;');
}else{
	newimg.setAttribute('style', 'border:0px;');
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var newimg=new Image;
newimg.src = tab[2];
newimg.setAttribute('id', id);
newimg.style.border="0px";
}

[d-Rek]

Shinuza > Exact mais si il veut jouer avec l'opacité, j'ai pas trop d'autres solutions. (j'ai fait un copier/coller d'un de mes scripts en virant l'inutile et en laissant l'agréable)

Tu as encore un innerHTML :

Code Javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function createEl(type,parent,id,content){
	var el = document.createElement(type);
	el.setAttribute('id',id);
	el.innerHTML = content;
	getElement(parent).appendChild(el);
	return getElement(id);
}

ainsi que là :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

getElement(el).innerHTML = "";

Et aussi, est-il possible de dire au navigateur que le contenu à afficher dans un createTextNode c'est du HTML à afficher et non du texte brut ?

Ui, non. Pas dans un createNodeText mais dans un createElement tout court ! Regarde mon premier post, j'insère une image et pas du texte dans mon createElement('a') :

Code Javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
newlink.appendChild(newimg);
$(div).appendChild(newlink);

Pour supprimer :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="haut" align="center">
	<div id="interne"></div> 
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
while ($('haut').firstChild){
	$('haut').removeChild($('haut').firstChild);
}

PS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

function $(id){return document.getElementById(id);}

[Molos]

Ok, mais en faites, je voulais éviter de créer l'élement avec le DOM, car c'est toujours la même chose qu'il devra mettre dedans

Donc je teste ça tout de suite

PS : A quoi sert le $ que tu as mis dans ton PS ?

[d-Rek]

J'utilise tout le temps $ et non document.getElementById donc au lieu d'écrire cette longue "phrase", j'utilise cette fonction et j'écris $ à la place

[Molos]

Ok, merci beaucoup, j'essayerais ça moi aussi dès que j'aurais réussi à trouver ma solution

Donc voila, j'ai virer tous les innerHTML , mais maintenant j'ai un problème, comment attribuer une valeur à un textarea ?

Car voila tout le code que j'ai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
function createEl(type,parent,id){
	var el = document.createElement(type);
	el.setAttribute('id',id);
	getElement(parent).appendChild(el);
	return getElement(id);
}
 
function createTextarea(parent,id,content,cols){
	var el = document.createElement('textarea');
	el.setAttribute('id',id);
	el.setAttribute('value',content);
	el.setAttribute('cols',cols);
	el.setAttribute('onkeyup',"adaptRows(this);");
	getElement(parent).appendChild(el);
}
 
function createInput(parent,type,value,size,js,jsf){
	var el = document.createElement('input');
	el.setAttribute('type',type);
	el.setAttribute('value',value);
	el.setAttribute('size',size);
	if(js != ""){
		el.setAttribute(js,jsf);
	}
	getElement(parent).appendChild(el);
}
 
 
createEl('div',parent,'ed');
alert(content);
var cols = size[1]/2;
createTextarea('ed',content,cols);
var jsf = "closeForm('"+parent+"');"
createInput('ed',"button","Close",size[1],"onclick",jsf);
element = getElement('ed');

Et donc, lorsque je fais mon alert, je vois bien mon texte, mais lorsque le textarea s'affiche, il n'est pas là

Merci d'avance

EDIT 1 : En faites, vu que le contenu est du texte, j'ai fait un document.createTextNode(content)

EDIT 2 : Voila, toujours le même problème avec Opéra
Le div ed que j'ai supprimé ré-apparait

Donc voilà mon code pour la suppréssion :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
var contenu = $('edition').value;
deleteEl('ed',el);
$(el).appendChild(document.createTextNode(contenu));

Et donc, mon contenu se retrouve toujours dans le textarea qui a été détruit par la fonction deleteEl