Collapse ne fonctionne pas avec une table dynamic

**Zarkoffe** · 23/08/2019, 16h58

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

Invité · 23/08/2019, 20h11

Bonjour,

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

Mais où est l'élément dynamique ?

**Zarkoffe** · 26/08/2019, 11h31

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

Invité · 26/08/2019, 12h01

OK...
Donc, depuis 3 jours, tu n'as RIEN fait...

As-tu REGARDÉ dans la console s'il n'y a pas d'erreur JS ??

Non... Sinon, tu l'aurais vu...

Code :

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

1
2
  }
</script>

alors que c'est

Code :

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

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"; ??

**Zarkoffe** · 02/09/2019, 15h27

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

Invité · 02/09/2019, 15h51

Cette fois, c'est une accolade en trop.

Regarde dans la console.

**Zarkoffe** · 05/09/2019, 10h49

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

Invité · 05/09/2019, 11h45

J'ai à chaque fois testé ton code (en le corrigeant) : ça fonctionne.

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

**Zarkoffe** · 05/09/2019, 14h53

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

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

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

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

1
2
3
4
5
 
  $('.collapse').collapse({ toggle: false });
  function PictureLoadElements(){
    $('#table_article').closest('tr').find('.collapse').collapse('toggle');
  }

**Zarkoffe** · 10/09/2019, 15h40

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.

Nom : Capture d’écran de 2019-09-10 15-34-37.png
Affichages : 125
Taille : 18,5 Ko

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

Invité · 10/09/2019, 16h29

Bonjour,

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

On a :

Code HTML :

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

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

Donc :

Code :

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

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

**NoSmoking** · 11/09/2019, 14h09

Bonjour,
tiens on pourrait appliquer ici la réponse faite dans cette discussion.

**Zarkoffe** · 16/09/2019, 09h18

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!

Collapse ne fonctionne pas avec une table dynamic

jQuery

Discussions similaires

Partager

Partager