Compatibilité IE : plus aaargh, c'est [résolux] !

Salut all !

J'ai codé aujourd'hui un p'tit truc sympa, qui va me servir pour une applic php.

J'ai utilisé js pour cette partie-là parce que c'est bien pratique, en fait...

Mais (pasqu'il y a -hélas- toujours un mais), le script fonctionne parfaitement sur FF, mais pas sur IE.

Et ça, ça m'ennuie.

Seulement, je n'arrive pas vraiment à voir ce qui gêne.

Pourriez-vous éclairer ma lanterne ?

Voici le script appliqué, via ce lien (cliquez sur un paragraphe pour en modifier le contenu).

Et voici le code :

// fonction d'édition de paragraphe
function editPara(ref) {
	
	refObj = document.getElementsByTagName("p")[ref];
	
	// code du formulaire d'édition
	formTag= '<div class="center"><form action="#"><textarea cols="55" rows="10" id="content'+ref+'">'+refObj.innerHTML+'</textarea><br /><input type="button" id="valide'+ref+'" value="  valider les changements  " /><input type="button" id="reset'+ref+'" value="  annuler les changements  " /></form></div>';
	
	var inMemory = refObj.innerHTML;
	
	// changement du paragraphe par le formulaire d'édition
	refObj.innerHTML = formTag;
	document.getElementsByTagName("p")[ref].onclick = "";		
	
	// définition des comportements des boutons
		// bouton "annuler les changements"
			var annulIdent = 'reset'+ref;
			document.getElementById(annulIdent).onclick = function() {annulPara(ref, inMemory);};
		// bouton "valider les changements"
			var valideIdent = 'valide'+ref;
			var contentIdent = 'content'+ref;
			document.getElementById(valideIdent).onclick = function() {validPara(ref, document.getElementById(contentIdent).value);};
}

// fonction de rétablissement du paragraphe avant les changements
function annulPara(ref, innerRef) {
	
	document.getElementsByTagName("p")[ref].innerHTML = innerRef;
	document.getElementsByTagName("p")[ref].onclick = new Function("editPara("+ref+");")		
}

// fonction de ré-écriture du paragraphe avec les changements
function validPara(ref, innerRef) {
	
	document.getElementsByTagName("p")[ref].innerHTML = innerRef;
	document.getElementsByTagName("p")[ref].onclick = new Function("editPara("+ref+");")		
}

// routine des événements déclanchés en onload
window.onload = function() {
	
	// génération des onclick des événements
	for (ref=0; ref < document.getElementsByTagName("p").length; ref++) {
		
		document.getElementsByTagName("p")[ref].onclick = new Function("editPara("+ref+");");		
		
	}
	
}

Merci beaucoup à ceux qui pourront m'aider.

note: le design de la page est plus qu'accéssoire, je ne travaillerai là-dessus que quand le code sera fini et bouclé.

note2: je me rends compte que tous les crochets de mon script sont parsés par le forum, donc voici le lien direct vers le fichier js.
Modifié par Lisarael (29 Apr 2005 - 15:50)

J'essairai de regarder ça demain, mais je te garanti pas de t'aider, vu que tu as un meilleur niveau que moi dans le domaine

En tout cas, ça peut être sympa comme système bien developpé et étudié.

Bon, a première vu, comme ça, je dirait que tu peut avoir un problème avec cette syntaxe :

document.getElementsByTagName("p")[ ref ].onclick = "";

Essaye plutot :

 refObj.onclick = function(){};

A tester.

Bonjour,
Voici ce que je te propose (teste sous IE6 et FF1)

var i, formTag, refObj;
// fonction d'édition de paragraphe
function editPara(ref) {
	refObj = document.getElementsByTagName("p")[ref];
	// code du formulaire d'édition
	var inMemory = refObj.innerHTML;
	refObj.innerHTML = "";
	var dv = document.createElement("DIV");
	dv.className = "center";
	var frm = document.createElement("FORM");
	frm.setAttribute('action', '#');	
	var txta = document.createElement("TEXTAREA");
	txta.setAttribute('cols', '55');	
	txta.setAttribute('rows', '10');	
	txta.setAttribute('id', 'content'+ref);	
	var cont= document.createTextNode(inMemory)
	txta.appendChild(cont);
	frm.appendChild(txta);
	var inp = document.createElement("INPUT");
	inp.setAttribute('type', 'button');
	inp.setAttribute('id', 'valide'+ref);
	inp.setAttribute('value', '  valider les changements  ');
	frm.appendChild(inp);
	inp = document.createElement("INPUT");
	inp.setAttribute('type', 'button');
	inp.setAttribute('id', 'reset'+ref);
	inp.setAttribute('value', '  annuler les changements  ');
	frm.appendChild(inp);
	dv.appendChild(frm);
	// changement du paragraphe par le formulaire d'édition
	refObj.appendChild(dv); 
	document.getElementsByTagName("p")[ref].onclick = "";		
	// définition des comportements des boutons
		// bouton "annuler les changements"
			var annulIdent = 'reset'+ref;
			document.getElementById(annulIdent).onclick = function() {annulPara(ref, inMemory);};
		// bouton "valider les changements"
			var valideIdent = 'valide'+ref;
			var contentIdent = 'content'+ref;
			document.getElementById(valideIdent).onclick = function() {validPara(ref, document.getElementById(contentIdent).value);};
}
// fonction de rétablissement du paragraphe avant les changements
function annulPara(ref, innerRef) {
	document.getElementsByTagName("p")[ref].innerHTML = innerRef;
	document.getElementsByTagName("p")[ref].onclick = new Function("editPara("+ref+");")		
}
// fonction de ré-écriture du paragraphe avec les changements
function validPara(ref, innerRef) {
	document.getElementsByTagName("p")[ref].innerHTML = innerRef;
	document.getElementsByTagName("p")[ref].onclick = new Function("editPara("+ref+");")		
}
// routine des événements déclanchée en onload
window.onload = function() {
	// génération des onclick des événements
	for (i=0; i < document.getElementsByTagName("p").length; i++) {
		document.getElementsByTagName("p")[i].onclick = new Function("editPara("+i+");");		
	}
}

Bon courage[/i]

merci comar.

j'vais ajouter ça à ce que je fais, et j'vais voir. merci beaucoup.

edit: ça marche parfaitement, c'est super. j'aurai dû penser au DOM (note mentale: ne plus oublier le DOM).

je modifie encore quelques autres trucs, et je mets le machin en ligne, afin de vous montrer ce que ça donne.

mais le problème est d'ores et déjà [résolux], encore merci.
Modifié par Lisarael (29 Apr 2005 - 15:49)

Re,
Je viens de faire un petit test sous Opera 7.54, pour la version originale (rien ne s'affiche) et pour la version que je t'ai envoyée, un textarea vide s'affiche et les boutons ne font rien .
Des que j'ai un peu de temps, je regarde et je te tiens au courant.
@+

le code original, modifié en grande partie sur ton idée, fonctionne parfaitement chez moi, sous IE et FF.

je n'ai pas encore testé sur Opera, mais le but premier, ici, c'est de le faire tourner sous IE et FF, car ce sera uen applic destinée à un public plus que restreint, qui est à coup sûr sur l'un ou l'autre.

mais cela dit, je vais quand même regarder comment ça passe sur les autres navigateurs.

edit: Voici le script corrigé (sur base des notes de comar) et un peu amélioré.
liste des améliorations:
- rajout de quelques boutons, dont la possibilité de supprimer l'élément où d'en ajouter un nouveau avant ou après
- désactivation des onclick sur un paragraphe quand un autre est en édition
- début du codage de la partie "sauvegarde"
Modifié par Lisarael (29 Apr 2005 - 17:19)

j'ai testé mon script, il passe sans encombre sous

- Firefox
- IE 6 (pas testé en-dessous, faut que je dwnl la standalone du 5)
- Netscape 7

mais ne passe pas du tout dans opera, ni la 7.54, ni la 8b.

mais bon, comme je l'ai dit avant, pour moi, ça ne gêne pas. ceux qui voudrait réutiliser mon script et faire la portabilité, libre à eux, contactez-moi par mail pour avoir les sources complètes
Modifié par Lisarael (29 Apr 2005 - 17:25)

Opera, au niveau des textarea, faut avouer qu'il est bien chiatique, je sais pas si c'est lié, mais je le sens gros comme une maison.

Par exemple, impossible de faire une insertion de quoique ce soit à la position du curseur dans un texteaera et j'en passe...

Dommage (sinon, la 8.0 finale est sortie )