FF : contamination input par balise englobante

**Zwiter** · 15/05/2008, 23h15

Bonsoir,

Un soucis me fait tourner en rond avec Firefox et prototype.
L'affaire est fort simple, il s'agit de mettre a jour le contenu d'une balise div avec l'aide de la bibliotheque prototype.
Avec safari et opera, pas de souci, tout est bien remplacé comme il faut. Mais sous FF, si on edite une 2eme fois le champ, on se retrouve avec bla dans le champ texte.
Il faut que le texte reste sans balise.

L'exemple ici : http://vga.ost.free.fr/test/test2.php
Et voici le 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
19
20
21
22
23
24
 
<script src="prototype.js" type="text/javascript"></script>
<script>
function div2form(elem) {
	var content =  $(elem).innerHTML;//recupere le contenu de la balise
	var elemId = $(elem).identify();//recupere l'id de la balise div
 
	//remplace le div par le champ text et le bouton de soumission
	$(elemId).replace('<input type="text" id="' + elemId + '" value="' + content + '"> <input id="' + elemId + '_b" type="submit" value="sav" onclick="form2div(\'' + elemId + '\')" />');
	}
 
function form2div(elem) {
	var content =  $F(elem);//recupere le contenu du champ texte
	var elemId = $(elem).identify();//recupere l'id de la balise div
 
	//remplace le champ texte par une balise div identique a l'ancienne
	Element.replace(elemId, '<div id="' + elemId + '" onclick="div2form(\'' + elemId + '\')">' + content + '</div>');
	$(elemId + '_b').remove();//suprime le bouton
	}
</script>
</head>
<body>
<strong><div id="test" onclick="div2form(this)">bla</div></strong>
</body>

je vous remercie de votre attention

Zwiter

**SpaceFrog** · 16/05/2008, 16h55

Code :

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

1
2
.replace('<input type="text" id="' + elemId + '" value="' + content + '"> <input id="' + elemId + '_b" type="submit" value="sav" onclick="form2div(\'' + elemId + '\')" />');
	}

ehu tu remplaces quoi par quoi là je ne vois pas la virgule pour séparer les deux éléments?

**Zwiter** · 16/05/2008, 17h28

SpaceFrog : C'est une methode de prototype.js, ca remplace l'element designé par $(elemId).

mais la nuit porte conseil et j'ai contourné le probleme en utilisant les styles au lieu de la balise .
Cette methode permet d'ailleur de conserver les styles de la balise <div> ce qui me permettra de la reutiliser utlterieurement.

Voici ma solution, qui pourra peut etre reservir a qq un:

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
 
<script>
function div2form(elem) {
	var content =  $(elem).innerHTML;//recupere le contenu de la balise
	var elemId = $(elem).identify();//recupere l'id de la balise div
 
	var classList = $(elem).className;
 
	//remplace le div par le champ text et le bouton de soumission
	$(elemId).replace('<input type="text" id="' + elemId + '" value="' + content + '"> <input id="' + elemId + '_b" type="submit" value="sav" onclick="form2div(\'' + elemId + '\', \'' + classList + '\')" />');
	}
 
function form2div(elem, classList) {
	var content =  $F(elem);//recupere le contenu du champ texte
	var elemId = $(elem).identify();//recupere l'id de la balise div
 
	//remplace le champ texte par une balise div identique a l'ancienne
	Element.replace(elemId, '<div id="' + elemId + '" onclick="div2form(\'' + elemId + '\')" class="' + classList + '" >' + content + '</div>');
	$(elemId + '_b').remove();//suprime le bouton
	}
</script>
</head>
<body>
<div id="test" onclick="div2form(this)" class="bold center">bla</div>
</body>

Et je n'utilise pas la meme methode pour les 2 fonctions a cause de opera.

Envoyé par documentation prototype.js

Using replace as an instance method (e.g., $('foo').replace('Bar')) causes errors in Opera 9 when used on input elements. The replace property is reserved on inputs as part of Web Forms 2. As a workaround, use the generic version instead (Element.replace('foo', 'Bar')).

Je te remercie SpaceFrog d'avoir porté ton attention a mon probleme.

Zwiter

FF : contamination input par balise englobante [Prototype]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager