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

AJAX Discussion :

[AJAX - JQUERY] ajout de div dynamique


Sujet :

AJAX

  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Novembre 2005
    Messages
    653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2005
    Messages : 653
    Par défaut [AJAX - JQUERY] ajout de div dynamique
    Bonjour a tous,

    Je me mets progressivement a l'ajax Jquery (oui je sais il était temps)

    Je suis ne train de tester et de comprendre comme je peux dynamiquement rajouter ou supprimer des divs.

    J'ai tenté ça mais je ne sais pas comment inserer la variable qui serait le numero de la div :

    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
     
    $(document).ready(function() {
        $(".ajouterligne").click(function() {
            var ligne = '<div class="form-row">\
            <div class="col-md-3"><div class="position-relative form-group"><input data-ligne="'+idA+'" name="toto" id="toto" placeholder="" type="text" class="form-control" onblur="envoi(this)"></div></div>\
            <div class="col-md-4"><div class="position-relative form-group"><input data-ligne="'+idA+'" name="tata" id="tata" placeholder="" type="text" class="form-control" onblur="envoi(this)"></div></div>\
            <div class="col-md-4"><div class="position-relative form-group"><input data-ligne="'+idA+'" name="titi" id="titi" placeholder="" type="text" class="form-control" onblur="envoi(this)"></div></div>\
            <div class="col-md-1"><div class="position-relative form-group"><br><label for="exajout" class="ajouterligne">+</label> <label for="exsupp" class="supprimerlignedelete">-</label></div></div>\
        </div>';
            $("div.lignebanque").append(ligne);
        });
        $(".supprimerligne").click(function() {
            $("div.lignebanque div").append(ligne);
        });
    });

    Le but final est d'avoir autant de ligne que possible, ou en supprimer, avec a chaque fois un numero de data-ligne different pour faciliter son traitement en PHP.

    Merci de votre aide, je suis un peu dépassé.

    Bonne journée a tous.
    Guillaume

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 506
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 506
    Par défaut
    Bonjour,

    le plus simple c'est de déclarer ta div en tant qu'objet jQuery comme ça :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    var idA=0
         ,ligne=$('<div class="form-row">
            <div class="col-md-3"><div class="position-relative form-group"><input data-ligne="" name="toto"  placeholder="" type="text" class="form-control" ></div> 
            <div class="col-md-4"><div class="position-relative form-group"><input data-ligne="" name="tata" placeholder="" type="text" class="form-control" ></div> 
            <div class="col-md-4"><div class="position-relative form-group"><input data-ligne="" name="titi"  placeholder="" type="text" class="form-control" ></div> 
            <div class="col-md-1"><div class="position-relative form-group"><br><label for="exajout" class="ajouterligne">+</label> <label for="exsupp" class="supprimerlignedelete">-</label>
           </div>
    </div>');
    Et il faut supprimer les id, car à chaque fois que tu fais une copie de la variable ligne, les id seront dupliqués alors qu'un id doit être unique dans une page html.

    Comme ça tu peux appliquer les méthodes jQuery (spécialement $.attr et $.clone() dont tu as besoin) sur l'objet ligne, exemple :
    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
     
    $(".lignebanque")
    .on("click",".ajouterligne",function(){//ajouter
       idA++;//incrémenter idA
       ligne.clone()//faire une copie de ligne
       .find('[data-ligne]')//trouver [data-ligne] dans ligne
      .attr("data-ligne",idA)//attribuer un data-ligne dynamiquement
       .closest('.form-row')//revenir au parent supérieur ".form-row"
      .appendTo(".lignebanque")//ajouter ligne à ".lignebanque"
    })
    .on("click",".supprimerlignedelete",function(){//supprimer
       $(this).closest(".form-row").remove();//supprime le parent supérieur de ".supprimerlignedelete" sur lequel on clic, qui est le ".form-row" 
    })
    .on("blur","input[data-ligne]",function(){//blur
       envoi(this);
    })
    Comme tu vois, j'ai remplacé click par on, car les éléments seront insérés dynamiquement et il faut donc passer par délégation pour les attacher aux écouteurs d’événements et tu peux aussi supprimer l'attribut onblur de l'html et utiliser proprement jQuery.

  3. #3
    Membre éclairé
    Profil pro
    Inscrit en
    Novembre 2005
    Messages
    653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2005
    Messages : 653
    Par défaut
    Bonjour Toufik83, et merci pour ton aide.

    J'ai tenté de reprendre ton code mais j'ai rien ne se passe en cliquant sur + par exemple, alors que je n'ai aucune erreur ni console ni log (jquery est bien installé).

    Rien ne se passe que je tente de lancer la fonction avec la class (exemple 1) ou que je fasse un onclick (exemple 2) pour la première ligne qui doit lancer les autres.

    exemple 1
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <label for="exajout" class="ajouterligne">+</label> <label for="exsupp" class="supprimerligne">-</label>

    exemple 2
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <button type="button" class="mb-1 mr-1 btn btn-sm btn-shadow btn-outline-info" onclick="ajouterligne();"><i class="lnr-plus-circle btn-icon-wrapper"> </i></button>


    Merci encore pour l'aide

    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
    $(document).ready(function() {
        var idA=0,
        ligne=$('<div class="form-row">\
            <div class="col-md-3"><div class="position-relative form-group"><input data-ligne="" name="toto"  placeholder="" type="text" class="form-control" ></div>\
            <div class="col-md-4"><div class="position-relative form-group"><input data-ligne="" name="tata" placeholder="" type="text" class="form-control" ></div>\
            <div class="col-md-4"><div class="position-relative form-group"><input data-ligne="" name="titi"  placeholder="" type="text" class="form-control" ></div>\ 
            <div class="col-md-1"><div class="position-relative form-group"><br><label for="exajout" class="ajouterligne">+</label> <label for="exsupp" class="supprimerligne">-</label></div>\
            </div>');
            $(".lignebanque")
            .on("click",".ajouterligne",function(){//ajouter
            idA++;//incrémenter idA
            ligne.clone()//faire une copie de ligne
            .find('[data-ligne]')//trouver [data-ligne] dans ligne
            .attr("data-ligne",idA)//attribuer un data-ligne dynamiquement
            .closest('.form-row')//revenir au parent supérieur ".form-row"
            .appendTo(".lignebanque")//ajouter ligne à ".lignebanque"
            })
            .on("click",".supprimerligne",function(){//supprimer
            $(this).closest(".form-row").remove();//supprime le parent supérieur de ".supprimerligne" sur lequel on clic, qui est le ".form-row" 
            })
            .on("blur","input[data-ligne]",function(){//blur
            envoi(this);
            })
    });

  4. #4
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 506
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 506
    Par défaut
    Est-tu sûr que l'élément parent ayant la classe lignebanque est bien présent dans le document ?

  5. #5
    Membre éclairé
    Profil pro
    Inscrit en
    Novembre 2005
    Messages
    653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2005
    Messages : 653
    Par défaut
    Sauf si j'ai loupé quelques chose mais normalement oui

    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
    <!doctype html>
    <html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv="Content-Language" content="fr">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
        <meta name="msapplication-tap-highlight" content="no">
        <link rel="stylesheet" href="./assets/css/base.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="lignebanque">
            <div class="form-row">
                <div class="col-md-3"><div class="position-relative form-group"><input data-ligne="" name="toto"  placeholder="" type="text" class="form-control" ></div></div>
                <div class="col-md-4"><div class="position-relative form-group"><input data-ligne="" name="tata" placeholder="" type="text" class="form-control" ></div></div>
                <div class="col-md-4"><div class="position-relative form-group"><input data-ligne="" name="titi"  placeholder="" type="text" class="form-control" ></div></div> 
                <div class="col-md-1"><div class="position-relative form-group"><br><label for="exajout" class="ajouterligne">+</label> <label for="exsupp" class="supprimerligne">-</label></div></div>
            </div>
        </div>
        <script >
        $(document).ready(function() {
            var idA=0,
            ligne=$('<div class="form-row">\
                <div class="col-md-3"><div class="position-relative form-group"><input data-ligne="" name="toto"  placeholder="" type="text" class="form-control" ></div></div>\
                <div class="col-md-4"><div class="position-relative form-group"><input data-ligne="" name="tata" placeholder="" type="text" class="form-control" ></div></div>\
                <div class="col-md-4"><div class="position-relative form-group"><input data-ligne="" name="titi"  placeholder="" type="text" class="form-control" ></div></div>\ 
                <div class="col-md-1"><div class="position-relative form-group"><br><label for="exajout" class="ajouterligne">+</label> <label for="exsupp" class="supprimerligne">-</label></div></div>\
                </div>');
                $(".lignebanque")
                .on("click",".ajouterligne",function(){//ajouter
                idA++;//incrémenter idA
                ligne.clone()//faire une copie de ligne
                .find('[data-ligne]')//trouver [data-ligne] dans ligne
                .attr("data-ligne",idA)//attribuer un data-ligne dynamiquement
                .closest('.form-row')//revenir au parent supérieur ".form-row"
                .appendTo(".lignebanque")//ajouter ligne à ".lignebanque"
                })
                .on("click",".supprimerligne",function(){//supprimer
                $(this).closest(".form-row").remove();//supprime le parent supérieur de ".supprimerligne" sur lequel on clic, qui est le ".form-row" 
                })
                .on("blur","input[data-ligne]",function(){//blur
                envoi(this);
                })
        });
        </script>
    </body>
    </html>

    Sinon on oublie la classe et on fait un vrai bouton avec un onclick pour declencher le append. ça ne me derange pas au contraire, mais moi je n'y suis pas arrivé a le faire fonctionner.

    Sinon j'ai une error : Uncaught SyntaxError: Invalid or unexpected token concernant le debut de code :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    ligne=$('<div class="form-row">\
    Merci encore de ton aide

  6. #6
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 506
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 506
    Par défaut
    Bonjour,

    Il y'a surement quelque chose dans ton code qui ne va pas, car je viens de tester et cela fonctionne sans souci.
    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
     
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    	<meta charset="utf-8" />
    	<title>Géstion...</title>
    	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
    	<script src="https://code.jquery.com/jquery-3.5.1.js"
    		  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
    		  crossorigin="anonymous">
    	</script>
    	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
    	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    	<script>
                    $(document).ready(function() {
                            var idA=0,
                            ligne=$('<div class="form-row">\
                                    <div class="col-md-3"><div class="position-relative form-group"><input data-ligne="" name="toto"  placeholder="" type="text" class="form-control" ></div></div>\
                                    <div class="col-md-4"><div class="position-relative form-group"><input data-ligne="" name="tata" placeholder="" type="text" class="form-control" ></div></div>\
                                    <div class="col-md-4"><div class="position-relative form-group"><input data-ligne="" name="titi"  placeholder="" type="text" class="form-control" ></div></div>\
                                    <div class="col-md-1"><div class="position-relative form-group">\
                                                    <label for="exsupp" class="supprimerligne">-</label>\
                                            </div>\
                                    </div>\
                                    </div>');
                                    $(".lignebanque")
                                    .on("click",".ajouterligne",function(){//ajouter
                                            idA++;//incrémenter idA
                                            ligne.clone()//faire une copie de ligne
                                            .find('[data-ligne]')//trouver [data-ligne] dans ligne
                                            .attr("data-ligne",idA)//attribuer un data-ligne dynamiquement
                                            .closest('.form-row')//revenir au parent supérieur ".form-row"
                                            .appendTo(".lignebanque")//ajouter ligne à ".lignebanque"
                                    })
                                    .on("click",".supprimerligne",function(){//supprimer
                                            $(this).closest(".form-row").remove();//supprime le parent supérieur de ".supprimerligne" sur lequel on clic, qui est le ".form-row" 
                                    })
                                    .on("blur","input[data-ligne]",function(){//blur
                                            envoi(this);
                                            console.log("blur...");
                                    })
                    });
            </script>
    </head>
    <body>
    <div class="container">
    	<div class="lignebanque">
    		<div class="col-md-8">
    			<div class="position-relative form-group">
    				<label for="exajout" class="ajouterligne">+</label>
    			</div>
    		</div>
    	</div>
    </div>
    </body>
    </html>

    Remarque : Normalement le bouton "+" qui ajoute les div doit être dans .lignebanque une seule fois, et le bouton "-" doit être dans chaque <div class="form-row">

  7. #7
    Membre éclairé
    Profil pro
    Inscrit en
    Novembre 2005
    Messages
    653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2005
    Messages : 653
    Par défaut
    heuuu effectivement il y a pleins d'erreurs dans mon code.

    Je te remercie pour ton aide, je vais m'appuyer sur ton code pour comprendre.

    Merci encore et bonne soirée a toi

  8. #8
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 506
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 506
    Par défaut
    Si tu ne veux pas t'embrouiller avec le l'anti-slash "\" pour continuer la chaîne de caractère, utilise l'opérateur "+" pour la concaténation, c'est dire au lieu de :
    tu mets :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    "<div>"
    +"</div>"

  9. #9
    Membre éclairé
    Profil pro
    Inscrit en
    Novembre 2005
    Messages
    653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2005
    Messages : 653
    Par défaut
    Merci pour le conseil . que je vais evidemment suivre

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

Discussions similaires

  1. Ajouter une Div dynamiquement
    Par Vanessa48 dans le forum jQuery
    Réponses: 5
    Dernier message: 04/02/2013, 08h53
  2. [AJAX] Recuperer une div dynamique
    Par mikedimoi dans le forum AJAX
    Réponses: 8
    Dernier message: 28/12/2012, 17h14
  3. [AJAX] ajout / suppression champs ( dynamiquement ) dans une page web
    Par anwar1987 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 09/03/2009, 18h37
  4. Ajout de div dynamiquement
    Par phfle1 dans le forum Général Dotnet
    Réponses: 2
    Dernier message: 04/11/2008, 20h24
  5. [AJAX] ajouter un trigger dynamiquement
    Par zooffy dans le forum ASP.NET
    Réponses: 3
    Dernier message: 22/12/2007, 00h18

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