IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
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

jQuery Discussion :

Ajouter un bout de code HTML lors du clic sur un bouton.


Sujet :

jQuery

  1. #1
    Membre régulier
    Inscrit en
    novembre 2005
    Messages
    225
    Détails du profil
    Informations forums :
    Inscription : novembre 2005
    Messages : 225
    Points : 89
    Points
    89
    Par défaut Ajouter un bout de code HTML lors du clic sur un bouton.
    Bonjour à tous.

    Je vais essayé d'être le plus clair possible.

    J'ai codé un formulaire avec une ligne de plusieurs balises positionné dans un tableau "theab" "tbody".

    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
    <div class="card shadow mb-4">
     
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Encadrement et Animation</h6>
            </div>
     
            <div class="card-body">
     
                <div>
                    <button onclick="javascript:void(0);" class="btn btn-primary add_button">Ajouter une personne</button>
                </div>
     
                <div class="table-responsive mt-2">
                    <table class=" " id="dataTable" width="100%" cellspacing="0">
                        <thead>
                            <tr class="align-middle text-center">
                                <th>Intervenant / Encadrant</th>
                                <th>Début d'intervention</th>
                                <th>Fin d'intervention</th>
                                <th></th>
                            </tr>
                        </thead>
     
                        <tbody class="field_wrapper">
                            <tr>
                                <td><input type="text" class="form-control" id="nom_intervenant"></td>
                                <td><input type="datetime-local" class="form-control" id="dateheure_debut_intervention""></td>
                                        <td><input type="datetime-local" class="form-control"
                                        id="dateheure_fin_intervention"></td>
                                <td class="align-middle text-center"><a href="javascript:void(0);" class="remove_button"
                                        title="Supprimer l'intervenant">
                                        <img src=".\img\trash-solid.svg" width="20" />
                                    </a></td>
     
                            </tr>

    Je souhaiterais, lorsque l'utilisateur clic sur le bouton ajouter, insérer un bloc "html" ajoutant une nouvelle ligne.

    Ne maîtrisant pas Js, j'ai cherché sur le net et suis tombé sur ce bout de code qui semble parfait pour ce que je souhaite faire :

    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
    <script type="text/javascript">
        $(document).ready(function(){
            var maxField = 10; //Input fields increment limitation
            var addButton = $('.add_button'); //Add button selector
            var wrapper = $('.field_wrapper'); //Input field wrapper
            var fieldHTML = '<div><tr> <td><input type="text" class="form-control" id="nom_intervenant"></td> <td><input type="datetime-local" class="form-control" id="dateheure_debut_intervention""></td> <td><input type="datetime-local" class="form-control" id="dateheure_fin_intervention"></td> <td class="align-middle text-center"><a href="javascript:void(0);" class="remove_button" title="Supprimer l\'intervenant"> <img src="./img/trash-solid.svg" width="20" /> </a></td>  </tr></div>'; //New input field html 
            var x = 1; //Initial field counter is 1
     
            //Once add button is clicked
            $(addButton).click(function(){
                //Check maximum number of input fields
                if(x < maxField){ 
                    x++; //Increment field counter
                    $(wrapper).append(fieldHTML); //Add field html
                }
            });
     
            //Once remove button is clicked
            $(wrapper).on('click', '.remove_button', function(e){
                e.preventDefault();
                $(this).parent('div').remove(); //Remove field html
                x--; //Decrement field counter
            });
        });
        </script>
    Cela fonctionne sauf que... Lorsque je clic sur le bouton, la ligne s'ajoute mais tous les champs se trouve sur la première colonne. (La fonction ajouter / supprimer fonctionne correctement.)

    J'ai donc modifié le bloc à ajouter en supprimant la balise "div" pour ne laisser que la balise "tr". Cette fois ci, cela fonctionne et m'insère correctement les données sur ma page mais la fonction "supprimé" ne fonctionne plus.

    J'ai modifié
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $(this).parent('div').remove(); //Remove field html
    en
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $(this).parent('tr').remove(); //Remove field html
    mais cela ne fonctionne pas.

    Il doit probablement me manquer quelque-chose mais je ne trouve pas quoi.

    Merci d'avance pour l'aide précieuse que vous pourrez m'apporter.

    Je précise que je n'utilise peut-être pas la bonne méthode et suis prêt à changer complétement le script si besoin mais mes compétences en Js sont toutes récentes.

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    39 304
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 39 304
    Points : 65 956
    Points
    65 956
    Billets dans le blog
    1
    Par défaut
    Le souci vient du fait que le code ajouté après le onload de la page ne se voit pas affecter les evenements attribués dans le onload.

    Il faut dans le onlad (document ready) utiliser le on('click' ... avec trois paramètres afin d'attribuer l'évènement à partir du parent et ainsi faire en sorte que les éléments ajoutés dynamiquement après le onload se voient attribué l'event.
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  3. #3
    Membre régulier
    Inscrit en
    novembre 2005
    Messages
    225
    Détails du profil
    Informations forums :
    Inscription : novembre 2005
    Messages : 225
    Points : 89
    Points
    89
    Par défaut
    Bonjour SpaceFrog,

    Merci pour cet élément de réponse. Désolé pour le délai de réponse mais j'ai été pris par mes obligations professionnelles. Je me remet sur ce projet pour mon association.

    Je suis débutant en Js. J'ai compris qu'il me manquait un paramètre au niveau du Onload mais je ne vois pas comment l'ajouter. J'ai pas mal cherché sur le net mais je n'ai rien trouvé qui correspondrait à ce que je souhaite faire.

    Peut-être pourrais-tu m'orienter vers une piste, un lien, un tuto pour me permettre de comprendre ce que je dois faire / modifier pour parvenir à mes fins ?

    Merci d'avance pour ton aide.

  4. #4
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2008
    Messages
    1 897
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2008
    Messages : 1 897
    Points : 2 839
    Points
    2 839
    Par défaut
    Bonjour,

    C'est parfois plus facile d'expliquer un bout de code que d'expliquer comment l'écrire
    Donc voici ce qu'a décrit @SpaceFrog :

    Plutot que d'intercepter l'événement click après l'événement ready :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    $(addButton).click(function(){

    On va plutôt l'intercepter partout, et ce même sur le nouvel HTML en utilisant la méthode .on()
    Il existe d'ailleurs déjà une fois son utilisation donc voici comment je l'écrirais :
    Code javascript : 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
    $(document).ready(function () {
        var maxField = 10; //Input fields increment limitation
        var addButton = $('.add_button'); //Add button selector
        var wrapper = $('.field_wrapper'); //Input field wrapper
        var fieldHTML = '<div><tr> <td><input type="text" class="form-control" id="nom_intervenant"></td> <td><input type="datetime-local" class="form-control" id="dateheure_debut_intervention""></td> <td><input type="datetime-local" class="form-control" id="dateheure_fin_intervention"></td> <td class="align-middle text-center"><a href="javascript:void(0);" class="remove_button" title="Supprimer l\'intervenant"> <img src="./img/trash-solid.svg" width="20" /> </a></td>  </tr></div>'; //New input field html 
        var x = 1; //Initial field counter is 1
        //
        $(wrapper)
                .on('click', '.add_button', function (e) {
                    e.preventDefault();
                    //Check maximum number of input fields
                    if (x < maxField) {
                        x++; //Increment field counter
                        $(wrapper).append(fieldHTML); //Add field html
                    }
                })
                //Once remove button is clicked
                .on('click', '.remove_button', function (e) {
                    e.preventDefault();
                    $(this).parent('div').remove(); //Remove field html
                    x--; //Decrement field counter
                });
    });

    Le fait d'écrire les appels de méthodes à la chaine comme j'ai fait, c'est juste pcq c'est un chouilla moins rigoureux en mémoire que de les écrire un par un mais c'est l'équivalent à :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
        $(wrapper).on('click', '.add_button', function (e) {
            e.preventDefault();
            //Check maximum number of input fields
            if (x < maxField) {
                x++; //Increment field counter
                $(wrapper).append(fieldHTML); //Add field html
            }
        });
        $(wrapper).on('click', '.remove_button', function (e) {
            e.preventDefault();
            $(this).parent('div').remove(); //Remove field html
            x--; //Decrement field counter
        });


    NB : wrapper et addButton sont déjà des référence jQuery, il ne faudrait donc pas écrire : $(variable) mais directement variable.
    D'ailleurs, souvent en jQuery, si une variable est un object jQuery, on l'écrira avec un dollar, soit var $wrapper = $('.field_wrapper'); et var $addButton = $('.add_button');
    Code javascript : 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
    $(document).ready(function () {
        var maxField = 10; //Input fields increment limitation
        var $wrapper = $('.field_wrapper'); //Input field wrapper
        var fieldHTML = '<div><tr> <td><input type="text" class="form-control" id="nom_intervenant"></td> <td><input type="datetime-local" class="form-control" id="dateheure_debut_intervention""></td> <td><input type="datetime-local" class="form-control" id="dateheure_fin_intervention"></td> <td class="align-middle text-center"><a href="javascript:void(0);" class="remove_button" title="Supprimer l\'intervenant"> <img src="./img/trash-solid.svg" width="20" /> </a></td>  </tr></div>'; //New input field html 
        var x = 1; //Initial field counter is 1
        //
        $wrapper
                // Add button
                .on('click', '.add_button', function (e) {
                    e.preventDefault();
                    //Check maximum number of input fields
                    if (x < maxField) {
                        x++; //Increment field counter
                        $wrapper.append(fieldHTML); //Add field html
                    }
                })
                // Remove button
                .on('click', '.remove_button', function (e) {
                    e.preventDefault();
                    $(this).parent('div').remove(); //Remove field html
                    x--; //Decrement field counter
                });
    });

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    39 304
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 39 304
    Points : 65 956
    Points
    65 956
    Billets dans le blog
    1
    Par défaut
    @DarkStar: Merci d'avoir pris le temps d'expliciter mes propos, je suis très souvent succint dans mes interventions par faute de temps à consacrer au forum, j'essaye juste alors de mettre sur des pistes...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

Discussions similaires

  1. [RichFaces] Problème lors du clic sur un bouton
    Par chahrazedd dans le forum JSF
    Réponses: 11
    Dernier message: 18/08/2011, 17h50
  2. [HTML] simuler un clic sur un bouton
    Par sebac dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 09/06/2009, 19h13
  3. Réponses: 8
    Dernier message: 29/06/2007, 16h41
  4. Interruption d'une tache (SwingWorker) lors du clic sur un bouton
    Par Crowell dans le forum EDT/SwingWorker
    Réponses: 3
    Dernier message: 07/05/2007, 15h55
  5. JSP : Récupérer valeur lors du clic sur un bouton
    Par ze veritable farf dans le forum Servlets/JSP
    Réponses: 12
    Dernier message: 11/04/2006, 12h16

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