Utilisation de clone

Version imprimable

Bonjour,
J'ai un problème avec clone(), qui est une fonction simple et qui dans mon cas copie l'élément désigné dans une variable.
Lorsque je clone une div, lorsque j'affiche ma variable avec $variable.html(), j'ai ma div complète avec sa classe etc...
Exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <div class="table" class="hide"> <table> <tr class="entete"> <th class="labelDesignation">Désignation</th> <th class="labelReference">Référence</th> <th class="labelQuantite">Quantité</th> <th class="labelCode">Code</th> </tr> <tr class="ligne"> <td class="caseDesignation">{{ form_widget(prototype_articleProvisoire.designation) }}</td> <td class="caseReference">{{ form_widget(prototype_articleProvisoire.reference) }}</td> <td class="caseQuantite">{{ form_widget(prototype_articleProvisoire.quantite) }}</td> <td class="caseCode">{{ form_widget(prototype_articleProvisoire.code) }}</td> </tr> </table> </div>
Code:

1 2 3 4 $(document).ready(function(){ var $ligne = $('.ligne').clone(); console.log("$ligne : " + $ligne.html()); )};
Par contre lorsque je prend juste la balise <tr> avec sa classe comme dans le code ci-dessus, mon affichage ne me donne pas la balise <tr..., mais affiche à partir de <td...
Est-ce normal, sinon qu'est ce que je fais de faux ?
Merci pour votre aide et vos réponses.

28/05/2016, 17h19
NoSmoking

Bonjour,

Citation:

Lorsque je clone une div, lorsque j'affiche ma variable avec $variable.html(), j'ai ma div complète avec sa classe etc...

dans ce cas ce n'est pas un html() que tu mets en console.

La variable $ligne est bel et bien une <tr> il te suffit de l'append pour t'en rendre compte.

:fleche: jQuery.clone()
28/05/2016, 17h42
fips1962

Ah ben si, c'est bien un html() que je mets dans la console juste que devant je mets le nom de la variable.
Et comme effectivement le but est de faire un append, quand je le fais, j'obtiens pas une ligne mais juste les <td>...</td>, etc...

si tu veux voir le nodeName (tr,td,div,span...) de ton élément parent cloné :

Code:

1
2
3
4
5
6
 
$(document).ready(function(){
    var ligne = $('.ligne').clone();
      var Node=ligne.get(0).nodeName.toLowerCase();
  console.log("<"+Node+">"+ligne.html()+"</"+Node+">");
});

28/05/2016, 19h26
fips1962

Ah oui, ça c'est quelque chose que je ne connaissais pas.
Mais je n'ai pas la réponse à ma question, car quand je fais un append de ma $ligne, je n'ai que les <td>... et pas les <tr>.
Est-ce qu'il faut faire un append avec la variable recomposée avec les nodes ? Avec les <div> il n'y a pas ces problèmes...

Exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/le-frog/jquery-ui.min.css">
  <style>
 
    th, td {
      margin: 6px;
      padding: 3px;
      width: 200px;
      height: 80px;
      border: 1px dotted grey;
    }
 
  </style>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/i18n/jquery-ui-i18n.min.js"></script>
  <script>
    'use strict';
 
    $( function(){
 
      $( '#copy' ).on( 'click', function( ev ){
        let tbody = $( '#myTable > tbody' );
 
        tbody.find( 'tr' ).eq( 0 ).clone( true, true ).appendTo( tbody );
      });
 
    });
  </script>
</head>
<body>
 
  <button id="copy">Copy</button>
 
  <table id="myTable">
    <thead>
      <tr>
        <th class="labelDesignation">Désignation</th>
        <th class="labelReference">Référence</th>
        <th class="labelQuantite">Quantité</th>
        <th class="labelCode">Code</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="caseDesignation">designation</td>
        <td class="caseReference">reference</td>
        <td class="caseQuantite">quantite</td>
        <td class="caseCode">code</td>
      </tr>
    </tbody>
  </table>
 
</body>
</html>

clone() :fleche: Attention aux ID !

Voir : plug-in dvjhClone. Réaliser un clone complet et le mettre en place.

28/05/2016, 22h38
fips1962

C'est vrai qu'il faut faire gaffe aux ID. Ceci dit, en remettant les nodes artificiellement dans la variable, ça marche.
J'arrive à faire un append et là j'insère une ligne avec la balise <tr>.
C'est quand même fou, parce que nul part on ne parle de ça.
Je vais attendre encore un peu avant de passer en résolu, au cas où qlq aurait une idée...
Merci en tous les cas pour votre aide.
29/05/2016, 02h29
Toufik83

Citation:

Mais je n'ai pas la réponse à ma question, car quand je fais un append de ma $ligne, je n'ai que les <td>... et pas les <tr>.
Est-ce qu'il faut faire un append avec la variable recomposée avec les nodes ? Avec les <div> il n'y a pas ces problèmes...

tu veux dire que la console te renvois toute la div "<div>....</div>" quand tu la clones et que tu l'affiche avec variable.html()? t'en es sur?
regarde un peu ici https://jsfiddle.net/meah6fus/ .
quand tu clones un élément puis tu l'affiche dans la console avec $.html(), la console te renvois le corps de ton élément, c'est a dire son contenu HTML, logique, vue que la racine de cet élément (lui même) ne fait pas partie du corps.
par-contre si tu clones l'élément puis tu l'affiche avec $.parent().html(), là l'élément html fait partie du corps, donc il sera affiché dans la console.
essai d'utiliser $.parent() et $.parents() au lieu de $.get(0).nodeName...
29/05/2016, 08h23
NoSmoking

Citation:

Est-ce qu'il faut faire un append avec la variable recomposée avec les nodes ?

Aucune raison, à preuve les exemples fournis par la documentation officielle et officieuse (danielhagnoul), qui fonctionnent très bien.

❗ Peut être serait-il temps de nous fournir ton code pour voir ce qui peut clocher !

Bonjour,

ben en fait de code c'est celui que j'ai déjà donné, mais je le remets, peut être qu'il y a effectivement une erreur :
Voici le Html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<form action="{{ path('_ajoute_article_commande_provisoire',{ 'id': commandeProvisoire.id }) }}" method="POST" {{ form_enctype(form) }} class="form">
				<div>
					<a href="#" id="add-article" class="btn btn-success btn-xs">Ajouter un article</a>
				</div>
				<br>
				<ul class="articles" >
					{# itère sur chaque tag existant et affiche son unique champ : name #}
					{% for articleProvisoire in form.articleProvisoires %}
						<li>{{ form_row(articleProvisoire.designation) }}</li>
					{% endfor %}
				</ul>
				<section id="container-article">					
				</section>
					{{ form_widget(form._token) }}
			</form>
		</div>
	</div>
	<br>
	{% set prototype_articleProvisoire = form.articleProvisoires.vars.prototype %}
 
	<div class="table hide" >
		<table>
			<tr class="entete">
				<th class="labelDesignation">Désignation</th>
				<th class="labelReference">Référence</th>
				<th class="labelQuantite">Quantité</th>
				<th class="labelCode">Code</th>
			</tr>
			<tr class="ligne">
				<td class="caseDesignation">{{ form_widget(prototype_articleProvisoire.designation) }}</td>
				<td class="caseReference">{{ form_widget(prototype_articleProvisoire.reference) }}</td>
				<td class="caseQuantite">{{ form_widget(prototype_articleProvisoire.quantite) }}</td>
				<td class="caseCode">{{ form_widget(prototype_articleProvisoire.code) }}</td>
			</tr>
		</table>	
	</div>

Voici le Jquery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(document).ready(function(){
	var statusEntete = false;
	var $container = $('#container-article');
	var $table = $('.table').clone();
	var $ligne = $('.ligne').clone();	
 
	$('#add-article').on('click', function(event){
		event.preventDefault();
		event.stopPropagation();
 
		if(statusEntete) {
			var Node=$ligne.get(0).nodeName.toLowerCase();
			$ligne.html("<" + Node  + "class='ligne'>" + $ligne.html() + "</" + Node + ">");
			var $tableEvo = $('.tableEvo > tbody');
			$ligne = $($ligne.html().replace(/__name__/g, $ligne.length));
			$tableEvo.append($ligne);
		}
		else {
			$tableModifiee = $($table.html().replace(/__name__/g, $ligne.length));
			$tableModifiee.addClass('tableEvo');
			$container.append($tableModifiee);
			statusEntete = true;
		}
	});
});

ou sont les ouvertures des deux div qui sont fermés juste après la </form> ?

Code:

1
2
 
$ligne.html("<" + Node  + "class='ligne' >" + $ligne.html() + "</" + Node + ">"); //attention ici il faut BIEN garder l'espace AVANT class='ligne'

correction :

Code:

1
2
 
$ligne.html("<" + Node  + " class='ligne' >" + $ligne.html() + "</" + Node + ">");

30/05/2016, 08h27
fips1962

Les div fermées sont bien ouvertes au-dessus, j'ai juste un peu raccourci le code pour l'affichage.
L'erreur de l'espace manquant est bien vue, mais je n'ai toujours pas de réponse à ma question...

En fait le tout est de savoir si en faisant un clone, les balises englobantes sont comprises ou si on clone juste le corps de l'élément.
Pour info, j'avais déjà essayé parent() mais là j'ai les balises englobantes, mais aussi l'élément de rang supérieur.
30/05/2016, 08h56
fips1962

Disons que j'ai trouvé une espèce de solution...
Si l'on part du principe que le clone ne prend que le corps de l'élément, ce qui n'est peut être pas le cas, puisqu'avec mon div, j'avais la balise comprise, donc si on ne prend que l'élément je cherchais à n'avoir que la ligne, il suffit que je fasse $('tbody').clone(). Du coup j'ai bien mon <tr>...</tr>.

Si quelqu'un a une idée différente et surtout une explication claire et sure du clone...

Encore merci pour toutes vos interventions qui m'ont fait progresser.

1 pièce(s) jointe(s)

Bonjour,
J'ai repris ton code, le console.log affiche bien les tr et mon append fonctionne également :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
<!DOCTYPE html>
<html lang="fr" dir="ltr">
 
<head>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script>
        'use strict';
        $(function () {
            var toto = $("#toto");
            var $ligne = $('.ligne').clone()
            $ligne.appendTo(toto);
            console.log($ligne);
        });
    </script>
</head>
 
<body>
    <div class="table" class="hide">
        <table>
            <tr class="entete">
                <th class="labelDesignation">Désignation</th>
                <th class="labelReference">Référence</th>
                <th class="labelQuantite">Quantité</th>
                <th class="labelCode">Code</th>
            </tr>
            <tr class="ligne">
                <td class="caseDesignation">test1</td>
                <td class="caseReference">test2</td>
                <td class="caseQuantite">test3</td>
                <td class="caseCode">test4</td>
            </tr>
        </table>
    </div>
 
    <div id="toto"></div>
 
    </body>
</html>

Pièce jointe 211213

30/05/2016, 10h43
NoSmoking
Citation:

En fait le tout est de savoir si en faisant un clone, les balises englobantes sont comprises ou si on clone juste le corps de l'élément.

Citation:

Si l'on part du principe que le clone ne prend que le corps de l'élément

lorsque que tu « clones » l'élément, c'est une copie de l"élément que tu obtiens en retour un point c'est tout !

Il te faut une preuve, ..., tu l'as dans ton code, var Node=$ligne.get(0).nodeName.toLowerCase(), cela te renvoi bien tr.

Maintenant le principe que tu as adopté est « vérolé » à savoir qu'une fois ton élément cloné tu l'utilises pour l'ajouter dans ta <table> pui s tu n'utilises plus que lui.

ERREUR il te faut utiliser un clone de ce clone car lorsque tu « append » un élément à un autre cet élément est déplacé et n'appartient donc plus à son parent initial.
Dans ton code on devrait retrouver au minimum
Code:

1 2 3 4 5 if(statusEntete) { var $tableEvo = $('.tableEvo > tbody'); var $clone = $ligne.clone(); // création d'un clone du clone $tableEvo.append( $clone); // ajout du clone du clone }
Maintenant concernant la façon de gérer le name des champs, avec ton $ligne.length qui vaudra toujours 1, tu peux faire plus simple comme indiqué dans cette discussion : Insertion/Suppression d'une ligne d'une TABLE.

Merci pour toutes vos réponses, mais en avançant, je trouve une autre bizarrerie...
J'utilise mon script dans le cadre d'un formulaire imbriqué Symfony.
Afin d'afficher mon formulaire sous forme de tableau, je créé ce tableau caché (hide) avec les variables twig du prototype, mais pas dans la balise <form> :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <div class="table hide" > <table> <thead> <tr class="entete"> <th></th> <th class="labelDesignation">Désignation</th> <th class="labelReference">Référence</th> <th class="labelQuantite">Quantité</th> <th class="labelCode">Code</th> </tr> </thead> <tbody class="corpsTable"> <tr class="ligne"> <td class="btnSupp"><img src="{{ asset('images/icones/suppression.png') }}"></td> <td class="caseDesignation">{{ form_widget(prototype_articleProvisoire.designation) }}</td> <td class="caseReference">{{ form_widget(prototype_articleProvisoire.reference) }}</td> <td class="caseQuantite">{{ form_widget(prototype_articleProvisoire.quantite) }}</td> <td class="caseCode">{{ form_widget(prototype_articleProvisoire.code) }}</td> </tr> </tbody> </table> </div>
Puis je clone cette partie pour la modifier et ensuite faire un append à l'endroit où je veux qu'il s'affiche, dans la balise form.
En faisant cela, j'obtiens bien ma table, mais vide.
Toutes les variables twig ne s'affichent pas. Elle ne sont pas clonées, car pas "interprétées" en dehors de la balise form (enfin je crois).
Cependant, lorsqu'à l'origine, je mets tout mon tableau dans la balise form et que je le clone à partir de là, ça fonctionne.
Donc les variables twig ne "s'interprètent" que lorsqu'on est dans la balise <form>.

Je ne pense pas que cela se passe bien lors de la soumission du formulaire, il y aura des champs vides, etc...
Y a t-il une solution à ce problème ?

12/06/2016, 11h22
NoSmoking

Citation:

En faisant cela, j'obtiens bien ma table, mais vide.

utilises tu clone( true) ?
14/06/2016, 19h07
fips1962

Oui, j'ai essayé, mais cela ne change rien.
16/06/2016, 20h11
NoSmoking

Je ne connais pas le framework mais je pense qu'il faut que tu crées ton tableau dans la <form> because la syntaxe : form_widget.

Pour la vérifier fait un simple affichage de ta page, sans appeler ta fonction javascript, et regarde le code généré, CTRL +U, pour voir si la table est renseignée.
19/06/2016, 13h31
fips1962

Oui, c'est tout à fait cela. Le tableau n'est pas renseigné s'il est en-dehors du form.

Merci pour tout.