[AJAX - JQUERY] ajout de div dynamique

**guillaumeIOB** · 13/08/2020, 12h43

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

**Toufik83** · 13/08/2020, 16h09

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.

**guillaumeIOB** · 15/08/2020, 16h01

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

**Toufik83** · 15/08/2020, 18h16

Est-tu sûr que l'élément parent ayant la classe lignebanque est bien présent dans le document ?

**guillaumeIOB** · 15/08/2020, 23h08

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

**Toufik83** · 15/08/2020, 23h37

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

**guillaumeIOB** · 15/08/2020, 23h42

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

**Toufik83** · 15/08/2020, 23h47

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 :

Code :

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