Discussion :

[icareo]

Salut

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... )

Merci d'avance

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

[Walterbelo]

Le script :

Code :

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

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.

[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 !

[icareo]

Code :

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

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

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

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

[icareo]

Ceci dit, si

le DOM risque de ne pas aimer ...

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


merci beaucoup