Collapse ne fonctionne pas avec une table dynamic

Version imprimable

Bonjour,
Mon j'ai un collapse qui fonctionne. Mais lorsque je l'insers dans un TD d'un tableau où j'ajoute dynamiquement mes lignes par des appendChild, ça ne fonctionne plus.
Ci-dessous mon code:

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
63
64
        <table class="table table-bordered table-striped table-condensed">
          <thead>
            <tr>
              <th width="2"></th>
              <th width="80">Ref Article</th>
              <th width="20">Désign Article</th>
              <th width="5">Unite</th>        
              <th width="10">Prix Unitaire</th>
              <th width="10">Quantité</th>
              <th width="5">Remise</th>
              <th width="15">Total</th>
            </tr>
          </thead>
          <tbody id="table_article"> </tbody>
        </table>
 
        <table> 
          <tbody>
            <tr>
              <td>
                <div class="form-inline">
                  <input type="text" class="form-control article_remise">
                  <img class="sendto" src="../Assets/calculatrice.png" style="width: 40px; height: 40px; cursor: pointer;" >
                </div>
                <div class="collapse">
                  <div class="form-group col-md-6 alert alert-info">
                    <label for="Tel">Element 1:</label>
                    <input type='text' class='form-control'>  
                  </div>
                  <div class="form-group col-md-6 alert alert-info">
                    <label for="Tel">Element 2:</label>
                    <input type='text' class='form-control'>  
                  </div>
                </div>
              </td>
              <td><input type="number" class="form-control article_total" readonly="readonly"></td>
            </tr>
          </tbody>  
        </table>
      </div>
    </div>
  </div>
</div>
 
<script>
$(document).ready(function(){
  $(".sendto").click(function(){
    $(".collapse").collapse('toggle');
  });
});
  // AJOUTER UNE LIGNE       
  $(document).ready(function()
  {
    var Table_noms_messages = document.getElementById('table_article');
 
    const TR_Base = document.querySelector('#fantome tbody tr');
 
    $('#add_article').click(function () {    // "Ajouter un produit"
      var new_tr_clone = TR_Base.cloneNode(true);
      Table_noms_messages.appendChild( new_tr_clone );
    });
  
  }
</script>

Merci!

23/08/2019, 20h11
Invité

Bonjour,

Je suppose que tu parles bien de Bootstrap .collapse() ?

Mais où est l'élément dynamique ?
26/08/2019, 11h31
Zarkoffe

Bonjour,
Oui exactement!
Ligne 23 mon bouton, et ligne 25 ce qui devrait se dérouler quand je clique sur le bouton.
Merci d'avance
26/08/2019, 12h01
Invité
OK...
Donc, depuis 3 jours, tu n'as RIEN fait... :roll:

As-tu REGARDÉ dans la console s'il n'y a pas d'erreur JS ?? :weird:
Non... Sinon, tu l'aurais vu...
Code:

1 2 } </script>
alors que c'est
Code:

1 2 }); </script>
A NOTER : UNE SEULE erreur JS, et c'est TOUT le code JS qui plante.

N.B. Et je ne t'aurais pas déjà conseillé d'utiliser "use strict"; ??

Bonjour,
Merci pour ta réponse. Non pas d'erreur JS dans la console.
Pas de parenthèse manquante, c'est juste un oublis de ma part quand j'ai collé mon code ici.
Mon code fonctionne hors de ce tableau javascript, c'est donc le tableau qui me pose soucis.
Merci d'avance

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
63
 
<table class="table table-bordered table-striped table-condensed">
  <thead>
    <tr>
      <th width="2"></th>
      <th width="80">Ref Article</th>
      <th width="20">Désign Article</th>
      <th width="5">Unite</th>        
      <th width="10">Prix Unitaire</th>
      <th width="10">Quantité</th>
      <th width="5">Remise</th>
      <th width="15">Total</th>
    </tr>
  </thead>
  <tbody id="table_article"> </tbody>
</table>
 
<table> 
  <tbody>
    <tr>
      <td>
        <div class="form-inline">
          <input type="text" class="form-control article_remise">
          <img class="sendto" src="../Assets/calculatrice.png" style="width: 40px; height: 40px; cursor: pointer;" >
        </div>
        <div class="collapse">
          <div class="form-group col-md-6 alert alert-info">
            <label for="Tel">Element 1:</label>
            <input type='text' class='form-control'>  
          </div>
          <div class="form-group col-md-6 alert alert-info">
            <label for="Tel">Element 2:</label>
            <input type='text' class='form-control'>  
          </div>
        </div>
      </td>
      <td><input type="number" class="form-control article_total" readonly="readonly"></td>
    </tr>
  </tbody>  
</table>
 
<script>
"use strict";
$(document).ready(function(){
  $(".sendto").click(function(){
    $(".collapse").collapse('toggle');
  });
});
  // AJOUTER UNE LIGNE       
  $(document).ready(function()
  {
    var Table_noms_messages = document.getElementById('table_article');
 
    const TR_Base = document.querySelector('#fantome tbody tr');
 
    $('#add_article').click(function () {    // "Ajouter un produit"
      var new_tr_clone = TR_Base.cloneNode(true);
      Table_noms_messages.appendChild( new_tr_clone );
    });
  
  }
});
</script>

02/09/2019, 15h51
Invité

Cette fois, c'est une accolade en trop. :roll:

Regarde dans la console.
05/09/2019, 10h49
Zarkoffe

Merci,
En effet en copiant collant j'ai encore laissé une } en trop (j'ai édité mon message elle ne l'est plus).
Depuis le début ce n'est pas un soucis de paranthèse ou d'accolade, c'est un pb de tableau dynamique!
Car hors du tableau cela fonctionne!
Et j'ai essayé dans un tableau statique, c'est la même chose! Test le code tu verras ça bloque, alors qu'à l'extérieur pas de soucis.

Mon problème vient de mon tableau en javascript... mais où exactement?

merci d'avance
05/09/2019, 11h45
Invité
J'ai à chaque fois testé ton code (en le corrigeant) : ça fonctionne.
- https://codepen.io/jreaux62/pen/pozdMGb
05/09/2019, 14h53
Zarkoffe
En effet c'est étrange...
Je suis passé une fonction dans un onclick(), ça fonctionne à présent. :)

Dernière petite question : pour exécuter le collapse sur la bonne ligne, comment dois-je m'y prendre?
Mon code qui fonctionne :
Code:

1 2 3 4 5 $('.collapse').collapse({ toggle: false }); function PictureLoadElements(){ $('.collapse').collapse('toggle'); }
Ce que je suis en train d'essayer de faire (sans de succès pour le moment)
Code:

1 2 3 4 5 $('.collapse').collapse({ toggle: false }); function PictureLoadElements(){ $('#table_article').closest('tr').find('.collapse').collapse('toggle'); }
10/09/2019, 15h40
Zarkoffe

1 pièce(s) jointe(s)

Pour faire clair, je clique sur la 1ère calculatrice et la calcultrice en question (mais aussi sur les autres lignes) se déroulent, ce que je ne veux pas.
Pièce jointe 502268
Voilà pourquoi dans mon message précédent, je cherche à mêler le ".collapse" de Boostrap (pour effectuer le collapse) et ".find" de jquery (afin de viser la bonne ligne).
Et c'est ce que j'essaye de faire dans mon code précédent.

Merci d'avance

Bonjour,

https://codepen.io/jreaux62/pen/pozdMGb

On a :

Code:

1
2
3
4
5
6
7
        <div class="form-inline">
...
          <img class="sendto" ....>
        </div>
        <div class="collapse">
...
        </div>

Donc :

Code:

1
2
3
  $("table").on("click", ".sendto", function(){
    $(this).parent().siblings(".collapse").collapse('toggle');
  });

11/09/2019, 14h09
NoSmoking

La trop méconnue méthode index()

Bonjour,
tiens on pourrait appliquer ici la réponse faite dans cette discussion.
16/09/2019, 09h18
Zarkoffe

Fonctionne parfaitement! Et pour la suite j'ai réussis à faire ce que je voulais faire grâce à l'aide que tu m'as apporté sur un post précédent!
Merci, résolu!