Discussion :

[bloups0]

Bonjour,

Je travaille sur un projet ou je dois découper une page en plusieurs parti selon le choix de l'utilisateur, il y à un header, un footer, et le body, body qui peux contenir plusieurs "section". On peux donc définir la hauteur ainsi que la couleur.

Ne sachant pas forcément combien il y aura de section dans le body, j'ai ajouté un bouton, et j'ajoute donc une section. Pour pouvoir ajouter la section sous la premiere généré au chargement de la page, j'ai fais ainsi :

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
	<h1 class="body">Body - Section</h1>
	<div class="section" id="1">
		<div class="input-group">
	  		<span class="input-group-addon" id="basic-addon1">Couleur</span>
	  		<input type="text" class="form-control" aria-describedby="basic-addon1" name="couleur-body">
		</div>
		<div class="input-group">
	  		<span class="input-group-addon" id="basic-addon1">Hauteur</span>
	  		<input type="text" class="form-control" aria-describedby="basic-addon1" name="hauteur-body">
		</div>
	</div>
	<div class="section" id="2">
	</div>
<button class="glyphicon glyphicon-plus plus"></button>

Dans mon code JQuery, j'applique mon append sur last() section. Pour pouvoir sortir de ma section deux, j'ai donc fais ainsi :

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
$('.plus').click(function(event) {
	id = $('.section').last().attr('id');
	id = parseInt(id);
	$('.section').last().append(
		"<div class='input-group'>"+
  			"<span class='input-group-addon' id='basic-addon1'>Couleur</span>"+
  			"<input type='text' class='form-control' aria-describedby='basic-addon1' name='couleur-body'>"+
		"</div>"+
		"<div class='input-group'>"+
  			"<span class='input-group-addon' id='basic-addon1'>Hauteur</span>"+
  			"<input type='text' class='form-control' aria-describedby='basic-addon1' name='hauteur-body'>"+
		"</div>"+
	"</div>"+
	"<div class='section' id="+(id= id + 1)+">");
});

J'ai fais exprès de fermer une div en trop pour fermer ma seconde section, et ainsi ouvrir la troisième section, qui est automatiquement fermé par la div de la section qui servait précédemment à fermer la deux (Si je suis pas assez clair, hésiter pas à me le dire !).

Le souci, c'est que ma section 3 se créait dans ma section 2, et ma section 4 dans ma section 3 et ainsi de suite. Hors, je voudrais créer mes sections chacune à l'extérieur de la précédente. Je ne pense pas me tromper dans mon code, alors ma question est, est-ce la fonction append qui remanie mon code ? Ou j'ai fais une erreur quelque pars ?

EDIT:
J'ai aussi essayé ainsi :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
	<div class="body">
		<div class="section" id="1">
			<div class="input-group">
		  		<span class="input-group-addon" id="basic-addon1">Couleur</span>
		  		<input type="text" class="form-control" aria-describedby="basic-addon1" name="couleur-body">
			</div>
			<div class="input-group">
		  		<span class="input-group-addon" id="basic-addon1">Hauteur</span>
		  		<input type="text" class="form-control" aria-describedby="basic-addon1" name="hauteur-body">
			</div>
		</div>
		<div class="glyphicon glyphicon-plus plus"></div>
	</body>

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
 
	$('.plus').click(function(event) {
		id = $('.section').last().attr('id');
		id = parseInt(id);
		$('.section').after().last().append(
		"<div class='section' id="+(id= id + 1)+">"+
			"<div class='input-group'>"+
	  			"<span class='input-group-addon' id='basic-addon1'>Couleur</span>"+
	  			"<input type='text' class='form-control' aria-describedby='basic-addon1' name='couleur-body'>"+
			"</div>"+
			"<div class='input-group'>"+
	  			"<span class='input-group-addon' id='basic-addon1'>Hauteur</span>"+
	  			"<input type='text' class='form-control' aria-describedby='basic-addon1' name='hauteur-body'>"+
		"</div>");
	});

Et je me retrouve avec les sections 2 et 3 etc... dans ma section 1, je capte mal quelque chose ?

Merci d'avance pour les réponses.

[Toufik83]

si je comprends bien, tu veux a chaque fois que t'appuie sur le bouton, une section sera ajouter a ton body, c'est ça?

[bloups0]

Exactement, dans mon body. Du coup j'ai utilisé une autre méthode, mais j'aimerai comprendre pourquoi mon 1er code n'a pas marché.

[Toufik83]

le problème venait de la ligne

Code :

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

 $(".section").after().last().append(".....");

il fallait faire

Code :

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

 $('.section').last().after("ici le code html");

j'ai rectifié un peu ton exemple

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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Append Exemple </title>
<style>
        .section{border:2px solid black;margin:10px 0px}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function(){
        $('.plus').click(function(event) {
                id = $('.section').last().attr('id');
                id = parseInt(id);
    /*$(".section").after().last().append() n'est pas correct, $(".section").last().after(...) est suffisant */
                $('.section').last().after(
                "<div class='section' id="+(id= id + 1)+">"+
                        "<div class='input-group'>"+
                                "<span class='input-group-addon' id='basic-addon1'>Couleur</span>"+
                                "<input type='text' class='form-control' aria-describedby='basic-addon1' name='couleur-body'>"+
                        "</div>"+
                        "<div class='input-group'>"+
                                "<span class='input-group-addon' id='basic-addon1'>Hauteur</span>"+
                                "<input type='text' class='form-control' aria-describedby='basic-addon1' name='hauteur-body'>"+
                "</div>"+
    "</div>");/* ne pas oublier de fermer cette div */
    console.log($(".section").length);
        });
});
</script>
</head>
 
<body>
	<div class="body">
		<div class="section" id="1">
			<div class="input-group">
		  		<span class="input-group-addon" id="basic-addon1">Couleur</span>
		  		<input type="text" class="form-control" aria-describedby="basic-addon1" name="couleur-body">
			</div>
			<div class="input-group">
		  		<span class="input-group-addon" id="basic-addon1">Hauteur</span>
		  		<input type="text" class="form-control" aria-describedby="basic-addon1" name="hauteur-body">
			</div>
		</div>
		<div class="glyphicon glyphicon-plus plus">Ajouter Section</div>
	</div><!-- ici on ferme la div class="body" et pas le body !-->
</body>
</html>

[bloups0]

D'accord, merci !

[Toufik83]

de rien!
n'hésite pas si tu as d'autres questions.