Utilisation de clone

**fips1962** · 28/05/2016, 15h26

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**NoSmoking** · 28/05/2016, 17h19

Bonjour,

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.

jQuery.clone()

**fips1962** · 28/05/2016, 17h42

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...

**Toufik83** · 28/05/2016, 19h00

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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+">");
});

**fips1962** · 28/05/2016, 19h26

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...

**danielhagnoul** · 28/05/2016, 20h36

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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()

Attention aux ID !

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

**fips1962** · 28/05/2016, 22h38

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.

**Toufik83** · 29/05/2016, 02h29

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...

**NoSmoking** · 29/05/2016, 08h23

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 !

**fips1962** · 29/05/2016, 21h11

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
		}
	});
});

**Toufik83** · 30/05/2016, 00h21

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

correction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**fips1962** · 30/05/2016, 08h27

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.

**fips1962** · 30/05/2016, 08h56

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.

**chadoum** · 30/05/2016, 09h19

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Nom : Untitled.jpg
Affichages : 262
Taille : 33,0 Ko

**NoSmoking** · 30/05/2016, 10h43

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.

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**fips1962** · 12/06/2016, 09h50

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**NoSmoking** · 12/06/2016, 11h22

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

utilises tu clone( true) ?

**fips1962** · 14/06/2016, 19h07

Oui, j'ai essayé, mais cela ne change rien.

**NoSmoking** · 16/06/2016, 20h11

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.

**fips1962** · 19/06/2016, 13h31

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

Merci pour tout.

Utilisation de clone

jQuery

Discussions similaires

Partager

Partager