[DOM] Changer le type d'une balise

Version imprimable

09/03/2009, 19h05
icareo

[DOM] Changer le type d'une balise

Salut :aie:

Pour résumer, j'ai :

* une liste de contacts, contenant diverses informations (nom, numero, etc...) que j'affiche dans une page (chaque contact étant dans une boite).

* Chaque information est stockée dans un <div id="idContact_nomPropriete">

* Lorsqu'on est loggé en admin, un petit bouton "modifier" apparait dans la boite (en réalité un <div> avec un évènement Css 'hover', et un évènement 'onchange(idContact)')

Ce que je cherche à faire :

Lors du click (donc de l'appel à onchange)... je peux acceder à chaque <div> de chaque propriété facilement (via document.getElementById)... ma question est donc : Comment changer cette balise de <div> en <input type="text"> via javascript ? (le contenu se conservant ainsi : le div se transforme en textbox... :yaisse2: )

Merci d'avance :king:
09/03/2009, 19h28
SpaceFrog

je ne conseille pas le changement du type de la balise, le DOM risque de ne pas aimer ...
pourquoi ne pas avoir les deux sur la page et jouer sur le display none ?

Spacefrog a (toujours) raison

Le script :

Code:

1
2
3
4
5
6
7
8
9
10
11
<div id="didi">
Rien de rien
</div>
<input type="button" name="boubou" value="Change" onclick="onchange()">
<script type="text/javascript">
function onchange() {
z='<input type="text" id="txt" size="32">';
document.getElementById("didi").innerHTML=z;
document.getElementById("txt").focus();
}
</script>

Fonctionne très bien avec Firefox, mais pas du tout avec IE.

09/03/2009, 19h37
icareo

1) Parce que ça multiplie par 2 les nombres d'éléments html dans ma page... d'autant plus que chaque élément possède au moins 3 attributs donnés par php... du coup j'ai des <? echo $machin ?> de partout.

2) Parce que je veux que mon édition se fasse intuitivement, du coup, quand on clique sur "modifier" ou "fin de modification", la seule chose qui doit changer, c'est qu'on aie un textbox, ou un div... le contenu, lui ne diffère pas :
Avec cette solution alternative, du coup, faut que je synchronise les contenus entre les 2 ... :?

Du coup, c'est bordélique coté html comme coté javascript :(

mais je pense que je vais faire comme ça au final !

Code:

document.getElementById("txt").focus();

Merci pour ça :mrgreen: je connaissais pas
Sinon, le code que tu m'as donnée ressemble bien au mien... à la nuance près :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<div id="didi_<? echo $id; ?>">
Rien de rien
<input type="button" name="change" value="Change" onclick="onchange(<? echo $id; ?>)">
<input type="button" name="boubou" value="Fini" onclick="finChangement(<? echo $id; ?>)">
</div>
 
<script type="text/javascript">
function onchange(id) {
z='<input type="text" id="txt"'+id+' size="32">Rien de rien</input>';
document.getElementById("didi_"+id).innerHTML=z;
document.getElementById("txt_"+id).focus();
}
 
function finChangement(id)
{
  // sauvegarde via getXhr().send
  document.getElementById("didi_"+id).innerHTML=document.getElementById("txt_"+id).innerHTML;
}
</script>

du coup c'est un peu bordélique à mon goût :)

09/03/2009, 19h49
icareo

Ceci dit, si

Citation:

le DOM risque de ne pas aimer ...

que je change le type d'une balise, je ferais de cette manière :aie:

merci beaucoup :king: