Affichage d'un textbox sur un click

Affichage d'un textbox sur un click - HTML/CSS - Programmation

Marsh Posté le 10-12-2010 à 10:23:36    

Bonjour,
 
Je travail sur un tableau dans lequel il y a une colonne "Commentaires". Dans cette colonne se trouve le commentaire de la ligne + un bouton image afin de transformer ce champ en textbox. La difficulte est que j'aimerai que le commentaire apparaisse dans la textbox et disparaisse de la colonne. Je voudrais egalement faire apparaitre un bouton pour valider la mise a jour du commentaire. D'ailleurs, faut il un formulaire different pour chaque ligne du tableau ?
 
J'ai cherche sur la toile, mais sans resultat.
 
Pourriez vous m'indiquer la voie a suivre ?
 
Merci,
Vincent


Message édité par shooker le 10-12-2010 à 10:27:17
Reply

Marsh Posté le 10-12-2010 à 10:23:36   

Reply

Marsh Posté le 10-12-2010 à 10:57:44    

Salut,

 

Pour ce genre d'interaction, il te faut du JS, tu peux donc directement faire ça en AJAX en t'aidant d'une bibliothèque comme JQuery...
Pas besoin de <form> pour chaque cellule si AJAX...

 

Je ferais :

 

1/ Au click sur une des images "ajouter un commentaire", je récupère le conteneur parent (un <td> ?), ainsi qu'un l'ID ou autre qui permet de savoir ou mettre le futur-post dans ta BDD.

 

2/ Je cache cette image et injecte un textArea et son btn de validation.

 

3/ Au click sur ton btn de validation, j'envoi une requete AJAX contenant en POST le contenu du message et les info necessaire pour la traiter (lieux dans ta base). Ton PHP ciblé fait le reste.
Si le PHP te valide la requete, je passe à 4.

 

4/ je cache le textarea, son bouton, puis j'injecte en JS le commentaire HTML qui a été posté. Je peux aussi recenser les commentaires en refaisant une requête AJAX.

 


Tu n'es pas obliger de passer par AJAX hein ! mais la démarche n'est pas beaucoup plus simple sans...
Concernant les fonctions JS pour rajouter/récupérer du contenu HTML, faire des requêtes AJAX, je te conseille de passer par JQuery, elles sont bien expliquées sur la Doc.  

 


Message édité par abais le 10-12-2010 à 10:58:49

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 10-12-2010 à 11:48:10    

Merci beaucoup pour ces conseils, mais je ne prefere pas utiliser AJAX pour le moment, je n'ai pas le temps de me former correctement. Je prefererai utiliser uniquement CSS et javascript. Voici ce que j'ai fait pour l'instant :

Code :
  1. <script>
  2. function afficheId(baliseId, baliseHide) {
  3.   if (document.getElementById && document.getElementById(baliseId) != null)   {
  4.     document.getElementById(baliseId).style.visibility='visible';
  5.     document.getElementById(baliseId).style.display='block';
  6. document.getElementById(baliseHide).style.visibility='hidden';
  7. document.getElementById(baliseHide).style.display='none';
  8.   }
  9. }
  10. </script>
  11. <table>
  12.   <tr>
  13.     <td>
  14.       <p id="comment2">Test comment <a href="javascript:afficheId('updateaction2','comment2')"><img src='images/script_edit.png' /></a></p>
  15.       <form name="updateaction2" method="post" action="comment_update.php?id=2" style="display: none;">
  16.         <textarea name="msg" rows="3" id="comment" cols="50">Test comment</textarea>
  17.         <input type="submit" name="submit" value="OK">
  18.       </form>
  19.     </td>
  20. </tr>
  21. </table>


Ma fonction pour afficher/cacher des elements ne fonctionne pas, qu'est ce qui ne va pas ?

Reply

Marsh Posté le 10-12-2010 à 12:01:13    

En fait ca fonctionne sur IE, mais pas sur Mozilla et Chrome...
 
Est ce que j'utilise des proprietes que seul IE utilise ?

Reply

Marsh Posté le 10-12-2010 à 12:06:56    

Plusieurs remarques :
- il faut un attribut type à la balise script : <script type="text/javascript">
- pas besoin de jouer sur la visibility et de display en même temps. Le display suffit.
- tous les navigateurs reconnaissent document.getElementById
- tu fais trop d'appels à document.getElementById. Une fois que la fonction t'a retourné l'objet, stocke le dans une variable que tu utiliseras :

Code :
  1. function afficheId(baliseId, baliseHide) {
  2.  var show = document.getElementById(baliseId);
  3.  if(show)
  4.    show.style.display='block';
  5.  var hide = document.getElementById(baliseHide);
  6.  if(hide)
  7.    hide.style.display='none';


- utilise un framework javascript, tu vas gagner du temps. en jQuery :

Code :
  1. $('#'+baliseId).show();
  2.   $('#'+baliseHide).hide();


En plus, ça t'aidera à passer à l'ajax quand tu en auras besoin.


Message édité par Paulp le 10-12-2010 à 12:07:38
Reply

Marsh Posté le 10-12-2010 à 12:37:09    

Merci beaucoup, ca fonctionne.
 
Pour l'AJAX, je m'y mets tres prochainement, promis :)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed