Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    janvier 2018
    Messages
    142
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : Distribution

    Informations forums :
    Inscription : janvier 2018
    Messages : 142
    Points : 39
    Points
    39

    Par défaut Collapse ne fonctionne pas avec une table dynamic

    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!

  2. #2
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 334
    Points : 31 302
    Points
    31 302

    Par défaut

    Bonjour,

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

    Mais où est l'élément dynamique ?
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  3. #3
    Nouveau membre du Club
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    janvier 2018
    Messages
    142
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : Distribution

    Informations forums :
    Inscription : janvier 2018
    Messages : 142
    Points : 39
    Points
    39

    Par défaut

    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

  4. #4
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 334
    Points : 31 302
    Points
    31 302

    Par défaut

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

    alors que c'est
    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"; ??
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  5. #5
    Nouveau membre du Club
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    janvier 2018
    Messages
    142
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : Distribution

    Informations forums :
    Inscription : janvier 2018
    Messages : 142
    Points : 39
    Points
    39

    Par défaut

    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>

  6. #6
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 334
    Points : 31 302
    Points
    31 302

    Par défaut

    Cette fois, c'est une accolade en trop.

    Regarde dans la console.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  7. #7
    Nouveau membre du Club
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    janvier 2018
    Messages
    142
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : Distribution

    Informations forums :
    Inscription : janvier 2018
    Messages : 142
    Points : 39
    Points
    39

    Par défaut

    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

  8. #8
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 334
    Points : 31 302
    Points
    31 302

    Par défaut

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

    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  9. #9
    Nouveau membre du Club
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    janvier 2018
    Messages
    142
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : Distribution

    Informations forums :
    Inscription : janvier 2018
    Messages : 142
    Points : 39
    Points
    39

    Par défaut

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

  10. #10
    Nouveau membre du Club
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    janvier 2018
    Messages
    142
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : Distribution

    Informations forums :
    Inscription : janvier 2018
    Messages : 142
    Points : 39
    Points
    39

    Par défaut

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

  11. #11
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 334
    Points : 31 302
    Points
    31 302

    Par défaut

    Bonjour,



    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');
      });
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  12. #12
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 748
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 748
    Points : 33 410
    Points
    33 410

    Par défaut La trop méconnue méthode index()

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

  13. #13
    Nouveau membre du Club
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    janvier 2018
    Messages
    142
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : Distribution

    Informations forums :
    Inscription : janvier 2018
    Messages : 142
    Points : 39
    Points
    39

    Par défaut

    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!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. LIKE qui ne fonctionne pas avec une espace
    Par CinePhil dans le forum Requêtes
    Réponses: 2
    Dernier message: 15/10/2008, 16h46
  2. un For Each qui ne fonctionne pas avec une collection maison !
    Par grenouillesiverte dans le forum Windows Forms
    Réponses: 7
    Dernier message: 01/09/2007, 21h00
  3. Réponses: 4
    Dernier message: 15/03/2007, 20h32
  4. Réponses: 10
    Dernier message: 13/03/2007, 11h38
  5. Réponses: 7
    Dernier message: 24/01/2006, 11h03

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo