Discussion :

[FCL31]

Bonjour

J'ai une div .date que je voudrais dupliquer dans ma div #dateCalendar quand je clic sue le lien qui à la classe .valid (un gliphicon dans un lien)

Voici l'HTML et le js.

Code html :

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

1
2
3
4
5
6
7
8
 
<div id="dateCalendar" >
  <div class="date">
    Date : <input type="text" class="mCalendarFR" id="textBox" name="" value="">
    <a class="valid glyph" href=""><span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span></a>
    <a class="del glyph" href=""><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></a>
  </div>
</div>

Code :

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

1
2
3
4
5
6
 
$(function(){
  $(".valid").on("click", function(){
    $(".dat").clone().appendTo("#dateCalendar")
  })
})

Malgré plusieurs test et mainte recherche, je n'arrive à rien.

Une petite aide SVP.

Merci d'avance

[NoSmoking]

Bonjour,
$(".dat").clone() ?

[FCL31]

Merci pour ta réponse.

Excuse moi mais je comprend trop ta réponse 🤔

[NoSmoking]

Simplement que dans ton code HTML on trouve <div class="date"> !

[FCL31]

Ah oui, le boulet ^^

Toutefois, sa marche pas pour autant.

Quand je clique sur le bouton (glyphicon en fait), la div se duplique bien en dessous comme voulu mais disparaît immédiatement.
J'avais déjà réussi ça sans trouver la solution au problème (d'où mes 50 tests différents).

Une idée du pourquoi ??

Même si ces div ne sont pas utilisées dans d'autre js, peut il y avoir des conflits avec d'autres js ??

Merci d'avance.

[NoSmoking]

Toutefois, sa marche pas pour autant.

dans ton code on trouve <a class="valid glyph" href="" ce qui veut dire que ta page est rechargée, il te faut donc inhiber l'action par défaut de la balise <a>, il serait d’ailleurs plus judicieux à mon sens d'utiliser un <button> mais bon !

Le deuxième point est que la copie ne réagira pas car le clonage ne prend pas les événements en compte, sauf si tu passes en paramètre true.
Voir : clone().

Le troisième point est que lors des ajout suivant tu vas dupliquer la première fois une <div> le deuxième fois deux <div> la troisième fois quatre <div> et ainsi de suite. Ce n'est surement pas ce que tu souhaites. Il ne te faut donc faire un clone que de l'élément contenant ta commande d'ajout.
Voir : closest().

Au final ton code devrait plus ressembler à

Code :

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

1
2
3
4
$(".valid").on("click", function(e){
  e.preventDefault();
  $(this).closest(".date").clone(true).appendTo("#dateCalendar");
})

[FCL31]

Bonjour.

Nikel

Par contre, j'ai une demande de modification.

Au lieu de rajouter des <input>, il m'a été demandé d'enregistrer les valeurs de l'input dans un tableau (PS : j'ai supprimer le clic sur une balise <a>)

Par conséquent, j'ai fait une <table> et je duplique les <tr>.

HTML

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<table class="table">  <tbody id="tbljours">
    <tr class="tbltr">
      <td class="tbltd">
        truc
      </td>
      <td>
        <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
      </td>
    </tr>
  </tbody>
</table>

jQuery

Code :

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

1
2
3
  var $tr = $(".tbltr").clone();  $(".valid").on("click", function(){
    $tr.appendTo("#tbljours");
  })

Mais quand je clique pour ajouter, je ne peux ajouter qu'une seule ligne au tableau malgré plusieurs clic d'ajout.


Je comprend pas pourquoi (surement un truc à la c**).

Une idée ??

Merci d'avance

[NoSmoking]

Il faut que tu comprennes que var $tr = $(".tbltr").clone() te fais une copie de l'élément et que lorsque tu fais $tr.appendTo("#tbljours") tu déplaces la copie donc ... et ... les fois suivantes tu redéplaces cette copie, de là où elle est vers là où elle est, et ainsi de suite.

Il te faut travailler avec une copie de la copie pour garder la copie disponible.

Code :

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

1
2
3
4
var $tr = $(".tbltr").clone();
$(".valid").on("click", function(){
    $tr.clone().appendTo("#tbljours");
})

Question : combien de fois ai-je copié le mot copie dans ce texte ?

[FCL31]

Question : combien de fois ai-je copié le mot copie dans ce texte ?

Beaucoup de fois


Bon, et dernière petite question j’espère.

J'ai un tableau donc, j'ai une 1ere ligne d'affichée.
Comment ne pas afficher cette 1ere ligne ??

Merci

[NoSmoking]

Beaucoup de fois

Non il y avait un piège la réponse est aucune

J'ai un tableau donc, j'ai une 1ere ligne d'affichée.
Comment ne pas afficher cette 1ere ligne ??

Il suffit de la mettre en display:none une fois clonée, si c'est fait avant il ne faut oblier de remettre le display au clone sans quoi il ne sera pas visible.

Tu peux faire par exemple :

Code :

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

1
2
3
4
5
6
var oRef = $(".tbltr");
var $tr = oRef.clone();
oRef.hide();
$(".valid").on("click", function(e) {
    $tr.clone().appendTo("#tbljours");
});

ou encore tu peux t'en servir de référence directe

Code :

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

1
2
3
4
5
6
var oRef = $(".tbltr").hide();
$(".valid").on("click", function(e) {
    oRef.clone().appendTo("#tbljours").css({
        "display": ""
    });
});

[FCL31]

Désolé pour le retard de la réponse.

Nikel

Comme j'avais bien sur des données a traiter dans le tableau, j'ai été obligé de modifier un peut mais bon, aprés un peut de manip, j'ai se que je voulais.