Jquery - Copier contenu Span dans TextArea

Jquery - Copier contenu Span dans TextArea - HTML/CSS - Programmation

Marsh Posté le 20-08-2012 à 12:00:59    

Hello,
 
J'ai le code html suivant :  

Code :
  1. <td class="startmerge large edit_text" align="justify" id="td_source_1'">
  2.     <span id="span_source_1">MON CONTENU LONG EST ICI</span>
  3.     <textarea class="edittextarea" id="ta_source_1'"></textarea>
  4.     <span id="backup_source_1"></span>
  5. </td>


 
Sur un événement dblclick sur le TD, je veux rentrer en mode édition, et je copie donc le contenu du premier span dans le textarea, puis je cache ce que je ne veut pas voir.  

Code :
  1. $(".edit_text" ).dblclick(function(){
  2.     $("#ta_source_"+ID).html($("#span_source_"+ID).html());
  3. });


 
Le problème, c'est qu'il rajoute des séries d'espaces dans le textarea qui sortent de nulle part (pas d'espace dans le span, pas d'espace dans la base avant, si j'écris le texte directement depuis la base dans le textarea, pas de soucis, le problème c'est juste avec la copie...) Et malgré ces espaces, quand je compare le contenu du Span et du TextArea, c'est bien la même chose :
 

Code :
  1. if ($("#ta_source_"+ID).html() == $("#ta_source_"+ID).html())


 
Avant click :
http://hfr-rehost.net/self/pic/c32eff37d20e882d0045e65d83c1aec640d74524.png
 
Après click :
http://hfr-rehost.net/self/pic/c83375dbea6ef14a727aec54fa327e233b3a1798.png
 
Une piste ?  
 
Merci !

Message cité 1 fois
Message édité par gooopil le 20-08-2012 à 12:14:56
Reply

Marsh Posté le 20-08-2012 à 12:00:59   

Reply

Marsh Posté le 20-08-2012 à 15:03:26    

gooopil a écrit :

Hello,

 

J'ai le code html suivant :

Code :
  1. <td class="startmerge large edit_text" align="justify" id="td_source_1'">
  2.     <span id="span_source_1">MON CONTENU LONG EST ICI</span>
  3.     <textarea class="edittextarea" id="ta_source_1'"></textarea>
  4.     <span id="backup_source_1"></span>
  5. </td>
 

Sur un événement dblclick sur le TD, je veux rentrer en mode édition, et je copie donc le contenu du premier span dans le textarea, puis je cache ce que je ne veut pas voir.

Code :
  1. $(".edit_text" ).dblclick(function(){
  2.     $("#ta_source_"+ID).html($("#span_source_"+ID).html());
  3. });
 

Le problème, c'est qu'il rajoute des séries d'espaces dans le textarea qui sortent de nulle part (pas d'espace dans le span, pas d'espace dans la base avant, si j'écris le texte directement depuis la base dans le textarea, pas de soucis, le problème c'est juste avec la copie...) Et malgré ces espaces, quand je compare le contenu du Span et du TextArea, c'est bien la même chose :

 
Code :
  1. if ($("#ta_source_"+ID).html() == $("#ta_source_"+ID).html())



Donc les espaces sortent pas "de nulle part", ils sont dans ton HTML d'une manière ou d'une autre, genre via les filtres que tu appliques quand tu génères ton span: http://jsfiddle.net/z5fqW/

 

(accessoirement, ta méthode est quand même bien dégueu, et c'est quoi ton span "backup source_*"? C'est quoi cet ID tout en majuscules qui traine? Tu comptes vraiment attacher 500 évènements si t'as des pages avec 500 posts? Il te semble pas douteux de ballader du HTML comme ça de l'un à l'autre? Et pourquoi un attribut au milieu du TD comme ça, qui n'a rien à y faire? http://jsfiddle.net/z5fqW/3/)

 

(et l'édition sur double-click c'est une fausse-bonne-idée imo, perso j'ai la sélection de mots et de paragraphes en double- et triple-click et je les utilise souvent)

Message cité 1 fois
Message édité par masklinn le 20-08-2012 à 15:06:39

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-08-2012 à 15:22:28    

masklinn a écrit :


Donc les espaces sortent pas "de nulle part", ils sont dans ton HTML d'une manière ou d'une autre, genre via les filtres que tu appliques quand tu génères ton span: http://jsfiddle.net/z5fqW/


Putain, mais ouais, j'avais tellement confiance dans ce que je voyais dans l'affichage, que j'avais même vu qu'il y avait ces putain d'espaces dans le source html... Bon je sais pas d'où ils sortent vu que la base à l'air clean, mais c'est déjà une piste !! Merci pour le lien jsfiddle, connaissais pas, c'est pratique :jap:
 

masklinn a écrit :

(accessoirement, ta méthode est quand même bien dégueu, et c'est quoi ton span "backup source_*"? C'est quoi cet ID tout en majuscules qui traine? Tu comptes vraiment attacher 500 évènements si t'as des pages avec 500 posts? Il te semble pas douteux de ballader du HTML comme ça de l'un à l'autre? http://jsfiddle.net/z5fqW/2/)


Alors,  
- Le backup source, ça me servira de container pour stocker un historique pour chaque cellule modifiée (je rajoute une bouton "annuler modif" à la volée)
- L'ID c'est juste l'identifiant de ma ligne sur la table et en DB, c'est corrigé par un nom plus explicite depuis
- Je note ta méthode :jap: Je découvre jquery, et JS quasiment, j'étais déjà content d'avoir trouvé un truc qui marche, mais effectivement c'était un poil lourd... (j'ai 500 résultats par page avec au moins une dizaine de colonnes éditables...)[/quotemsg]
 

masklinn a écrit :


(et l'édition sur double-click c'est une fausse-bonne-idée imo, perso j'ai la sélection de mots et de paragraphes en double- et triple-click et je les utilise souvent)


Ouais, j'étais parti sur un simple clic, mais le retour utilisateur c'était que c'était trop risqué en simple clic. Le double click en sélection marche encore, faut juste en faire deux (un pour rentrer en mode édition, l'autre pour sélectionner le mot...).

Message cité 1 fois
Message édité par gooopil le 20-08-2012 à 15:24:06
Reply

Marsh Posté le 20-08-2012 à 15:40:45    

gooopil a écrit :

Putain, mais ouais, j'avais tellement confiance dans ce que je voyais dans l'affichage, que j'avais même vu qu'il y avait ces putain d'espaces dans le source html... Bon je sais pas d'où ils sortent vu que la base à l'air clean, mais c'est déjà une piste !!


Donc c'est probablement au moment où tu insères tes données dans le HTML.

gooopil a écrit :

- Le backup source, ça me servira de container pour stocker un historique pour chaque cellule modifiée (je rajoute une bouton "annuler modif" à la volée)


Après validation de l'édition, mais avant que ce soit re-sauvé en db?


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-08-2012 à 15:45:52    

masklinn a écrit :


Donc c'est probablement au moment où tu insères tes données dans le HTML.


Ouais :/ Et je fais rien du tout dessus pourtant, à part changer les < et > en entités :/ Va falloir que je dénoue tout ça...

masklinn a écrit :


Après validation de l'édition, mais avant que ce soit re-sauvé en db?


C'est justement pour éviter toute validation de l'édition. Soit je fournissais un moyen d'annuler un changement, soit une validation de l'édition. Pour que ça soit plus fluide à l'usage, en prenant pour hypothèse qu'il y aura au final peu de changements non validés.
Du coup je fais Modif texte -> enregistrement de la modif en DB et sauvegarde très temporaire de l'ancien texte. Si besoin, on peut revenir en arrière tant qu'on est sur la même page.


Message édité par gooopil le 20-08-2012 à 15:46:00
Reply

Marsh Posté le 20-08-2012 à 16:59:31    

Bon c'est bien ça, le texte est correct dans la DB.  
Par contre, impossible d'isoler ce qui me fait ça. J'ai un wrapper perso pour les fonctions de DB (j'utilise pas de framework), et je fais strictement la même chose que dans ma page de test (où ça marche sans m'insérer ces lutains d'espaces), comprend pas :/
 

Reply

Marsh Posté le 20-08-2012 à 20:09:59    

\o/ C'était l'indentation de Tidy qui foutait le bordel...
 
 [:kors'r:3]


Message édité par gooopil le 20-08-2012 à 20:10:14
Reply

Sujets relatifs:

Leave a Replay

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