Jquery - Clone d'elements imbriqués [RESOLU]

Jquery - Clone d'elements imbriqués [RESOLU] - Javascript/Node.js - Programmation

Marsh Posté le 01-06-2016 à 16:04:46    

Bonjour,
 
je sèche sur un jquery que je développe afin de cloner des elements impriqués.  
Je vous montre mon code ici : https://jsfiddle.net/b22ea2o1/
 
le soucis est quand je clone des éléments, ça les clones aussi pour les enfants.
je pense que je m'embrouille dans le code ou qu'il y a plus simple...
 
Si vous avez une idée je suis preneur :)
 
Merci!


Message édité par Crawdge le 21-06-2016 à 12:03:50
Reply

Marsh Posté le 01-06-2016 à 16:04:46   

Reply

Marsh Posté le 01-06-2016 à 16:53:41    

EDIT: nevermind l'explication donnée était pas la bonne par rapport a ton soucis, le reste reste intéressant.

 

Pour rendre ca plus propre, avoir un moteur de template (type Handlebars.js) règlera ce genre de chose assez facilement -et bien plus propore- rendant ton jquery plus concis et plus rapide (car tu n'auras qu'un template a intégré a ta page)

 

Au passage, pour envoyer ces informations il faut renommer en name="nom[]" par exemple. Le "[]" est la notation que l'on utilise pour passer un tableau de valeur (ce qui sera le cas si tu as plus de un enfant).
Normalement d'ailleurs cette notation PHP la gère très bien (par exemple, mais petit site je me doute que c'est du PHP) et te redonne un tableau comme il faut coté serveur.


Message édité par Devil'sTiger le 01-06-2016 à 16:56:47
Reply

Marsh Posté le 03-06-2016 à 10:55:05    

Je te remercie de ton aide. En effet Handlebars a l'air interessant cependant ca ne me fait pas avancer sur mon soucis d'imbrications :D
Aurais tu une petite idée de ce qui cloche ?

Reply

Marsh Posté le 03-06-2016 à 15:16:13    

Quand tu clones un élément, il apparait derrière le "p" du bouton ou tu as cliqué. Jusque là, tout va bien. Le problème vient quand tu clones un élément qui contient un élément. Exemple:
 
0 (parent)
-1 (enfant)
-11 (enfant)
-111 (enfant)
 
On va cliquer sur le bouton de l'enfant 11. Il va te cloner l'élément enfant 11, changer son id, il va cloner l'élément enfant 111 mais ne va pas changer son id. Ça va ressembler à ça:
 
0 (parent)
-1 (enfant)
-11 (enfant)
-112 (enfant new id)
--111 (enfant copié de 11 ayant la même ID que 111)
-111 (enfant)
 
 
 
De ce fait, dans ce workflow précis, tu auras des éléments doublons (même id). Pour répondre à ta question (car le problème avec les id, c'est autre chose :D)
 
Tu dois te baser sur un template, car la fonction clone va te cloner TOUT le DOM sélectionné (parent, enfant, etc ...)
 
<div 1>
 <div 2>
  <div 3>
  </div 3>
 </div 2>
</div 1>
 
Clone de div 1 te donnera nécessairement div 1, div 2 et div 3.

Reply

Marsh Posté le 07-06-2016 à 11:44:12    

Et si je fais une div end ehors du système que je duplique à chaque fois et que je mets après le bouton suite au clic...? Ca pourrait se faire ca non?
L'histoire de template m'a l'air compliqué et vu que c'est pour un projet que je dois rendre rapidement, je n'aurai sans doute pas le temps d'adapter tout ça

Reply

Marsh Posté le 09-06-2016 à 09:29:42    

Crawdge a écrit :

Et si je fais une div end ehors du système que je duplique à chaque fois et que je mets après le bouton suite au clic...? Ca pourrait se faire ca non?


 
Moi j'appelle cela un template perso :D Oui ça se fait, faut juste faire gaffe à comment tu vas binder l'event onClick et changer les identifiants, et c'est bon !
 
 

Reply

Marsh Posté le 09-06-2016 à 10:30:56    

J'allais dire la meme :D Handlebars est ton amis pour ce genre de chose :D Rapide & co, une fois compris ça se réutilise sans soucis (et c'est un truc très pratique a connaitre).
 

Reply

Marsh Posté le 09-06-2016 à 11:57:20    

Vous auriez un petit exemple rapide applicable à mon soucis?
Apres lecture du site de Handlebars, je ne vois pas trop comment faire

Reply

Marsh Posté le 09-06-2016 à 16:48:36    

Simple:
 
1) DL et inclus Handlebars.js dans ton code.
 
2) Il te faut compiler le template (javascript)

Code :
  1. var template = Handlebars.compile(source);
  2. return template(context);


 
Tu mets ca dans une jolie fonction avec deux parametres: source (ton HTML sous forme de string) et context (le contenu dynamique - un objet javascript).
 
3) Le template (html):

Code :
  1. <script id="waiting-content" type="text/x-handlebars-template">
  2.   <div>
  3.     Please wait {{name}}
  4.   </div>
  5. </script>


 
4) Exemple d'utilisation (en supposant que la fonction de 2) s'appelle renderHTML):

Code :
  1. var templateRendered = renderHTML($('#waiting-content').html(), {
  2.   name: 'Jean-Eude'
  3. });
  4. $('#mon-super-div-ou-je-met-dedans').append(templateRendered);


 
Voila :jap:


Message édité par Devil'sTiger le 09-06-2016 à 16:50:07
Reply

Marsh Posté le 21-06-2016 à 10:34:46    

Je continue mon développement mais je me pose une question pour l'id jsutement...
Comment je peux récupérer l'id le plus haut des éléments enfants ?
Pour le moment j'ai un compteur au tout debut à 0 puis ensuite a chaque niveau je rajoute un element mais ca ne me plait pas.
 
Exemple:  
Niveau 0
   - Niveau 0-1
   - Niveau 0-2
      - Niveau 0-2-3
      - Niveau 0-2-4
          - Niveau 0-2-4-5
Cela s’incrémente ainsi a chaque ajout d'un enfant. J'aimerai plutot qu'il regarde s'il y a des enfant. S'il n'y en a pas, le niveau du dessous commence à 1, sinon ca prend l'id le plus haut et ajoute 1)
 
Merci !

Reply

Marsh Posté le 21-06-2016 à 10:34:46   

Reply

Marsh Posté le 21-06-2016 à 12:03:31    

Bon au final j'ai trouvé à force d'acharnement.... :bounce:  
 
https://jsfiddle.net/pg0pwb9b/

Reply

Sujets relatifs:

Leave a Replay

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