[AJAX - JQUERY] ajout de div dynamique

Version imprimable

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:

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

Bonjour,

le plus simple c'est de déclarer ta div en tant qu'objet jQuery comme ça :

Code:

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:

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.

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:

<label for="exajout" class="ajouterligne">+</label> <label for="exsupp" class="supprimerligne">-</label>

exemple 2

Code:

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

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

15/08/2020, 18h16
Toufik83

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

Sauf si j'ai loupé quelques chose mais normalement oui

Code:

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:

ligne=$('<div class="form-row">\

Merci encore de ton aide

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:

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

15/08/2020, 23h42
guillaumeIOB

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
15/08/2020, 23h47
Toufik83
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:

1 2 3 "<div>\ </div>"
tu mets :
Code:

1 2 3 "<div>" +"</div>"
15/08/2020, 23h49
guillaumeIOB

Merci pour le conseil .:D que je vais evidemment suivre