Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3004 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Affichage d'un textbox sur un click

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Affichage d'un textbox sur un click

n°2041246
shooker
Posté le 10-12-2010 à 10:23:36  profilanswer
 

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
mood
Publicité
Posté le 10-12-2010 à 10:23:36  profilanswer
 

n°2041254
abais
Posté le 10-12-2010 à 10:57:44  profilanswer
 

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.
n°2041276
shooker
Posté le 10-12-2010 à 11:48:10  profilanswer
 

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 ?

n°2041283
shooker
Posté le 10-12-2010 à 12:01:13  profilanswer
 

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

n°2041285
Paulp
~, sweet ~
Posté le 10-12-2010 à 12:06:56  profilanswer
 

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
n°2041303
shooker
Posté le 10-12-2010 à 12:37:09  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Affichage d'un textbox sur un click

 

Sujets relatifs
onChange champ formulaire avec affichage de scriptPB affichage incomplet d'un cadre javascript
[Résolu] echo %%i : éviter l'affichage de la commande utilisée[GtkAda] [ résolu ] Click droit dans un Gtk_Fixed.
[resolu] JS affichage d'image cassé :-(Kcfinder si quelqu'un connait: Petit bug d'affichage...
Pas d'affichage d'images sur firefox mais oui sur les autres browsersPas d'affichage des images sur internet explorer mais oui sur firefox
affichage div dans un formulaireAffichage WScript.echo
Plus de sujets relatifs à : Affichage d'un textbox sur un click


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR