UI Accordion. Impossible d'ajouter un item dans un autre item Accordion vide

**TheDoci** · 20/05/2011, 18h41

Bonjour,

J'ai un problème avec JQuery UI Accordion (et peut-être aussi Sortable).
Voici tout d'abord le lien vers une démo et vers le code : http://jsfiddle.net/435bD/

J'ai une interface sur laquelle j'ai 3 accordéons. Dans le deuxième j'ai un bouton qui ajoute une nouvelle "section" à l'intérieur de l'accordéon. Les sections sont à la fois accordion et sortable.

En-dessous j'ai un bouton qui permet de créer une nouvelle "question" dans la première section de l'accordéon nommé "accordion 2".

Mon problème est que lorsque je crée une nouvelle session puis que je clique sur le bouton "Add a question to the first section", ma question n'a pas un look d'accordéon, et ne se comporte pas comme tel.

Mais si je mets "en dur" une section dans le div d'id #sections, alors les questions sont ajoutées correctement dans la section. De plus, si je crée une nouvelle section via le bouton "Add a new section" et que je modifie le javascript pour ajouter la question dans cette nouvelle section, ça marche parfaitement (pour tester ça il suffit juste de décommenter le <div id="sections_new1">...</div> dans le code HTML).

Donc je ne comprends pas ce qui ne va pas

Quelqu'un a-t-il une idée svp ?

**danielhagnoul** · 20/05/2011, 20h51

Bonsoir

Je vous conseille d'examiner le code de http://www.developpez.net/forums/d10...p/#post5936620 et de lire la discussion.

**TheDoci** · 20/05/2011, 22h03

Merci pour votre aide, mais je ne vois pas d'élément dans la dernière discussion qui pourrait m'aider dans ce cas-ci

**danielhagnoul** · 22/05/2011, 23h46

Bonsoir

Dans cette discussion on est arrivé à la conclusion que lorsque l'on modifie le contenu d'un UI Accordion il faut le détruire et le reconstruire.

Voir les messages numérotés 4 et 5.

**TheDoci** · 23/05/2011, 17h36

En fait c'est ce que je fais

(le code est dans le lien que j'ai donné dans ma question)

J'ai indiqué une possibilité pour résoudre le problème ici : http://stackoverflow.com/questions/6...mpty-accordion

Cependant, a priori cette solution n'est pas entièrement satisfaisante. Il faut encore que je fasse quelques tests

**danielhagnoul** · 27/05/2011, 00h25

Bonsoir

Désolé, on répond parfois trop vite. Je me suis arrêté au sujet de la question sans voir qu'il s'agissait d'une nouvelle question posée par la personne qui avait trouvé la solution.

Je viens de passer deux heures sur votre code avant de l'abandonner. J'ai alors repris le problème sur un exemple plus simple et j'ai trouvé la solution.

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
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/humanity/jquery-ui.css">
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
		body {background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* article */
		.conteneur {border-spacing:4px; }
		.ligne {display:table-row; }
		article {display:table-cell; text-align:center; vertical-align:middle; border:1px dotted grey; }
		article:nth-of-type(1) {width:400px; height:120px; }
 
		/* -- */
		#accordion {text-align:left; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<section class="ligne">
			<article>
 
				<div id="accordion">
					<div>
						<h3><a href="#">Section 1</a></h3>
						<div>
							<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
						</div>
					</div>
					<div>
						<h3><a href="#">Section 2</a></h3>
						<div>
							<button id="btnAddSection">Ajouter une section</button>
						</div>
					</div>
					<div>
						<h3><a href="#">Section 3</a></h3>
						<div>
							<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
							<ul>
								<li>List item one</li>
								<li>List item two</li>
								<li>List item three</li>
							</ul>
						</div>
					</div>
					<div>
						<h3><a href="#">Section 4</a></h3>
						<div>
							<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
						</div>
					</div>
				</div>
 
			</article>
		</section>
		<section class="ligne">
			<article>
 
 
			</article>
		</section>
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<!-- Date ISO format long US : aaaa-mm-qqThh:mm:ss.nnn+hh:mm -->
		<time datetime="2011-05-27T00:25:00.000+02:00" pubdate>2011-05-27</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
	<script>
		$(function(){
 
			var boolStop = false;
 
			$("#accordion h3").click(function( event ) {
				if ( boolStop ) {
					event.stopImmediatePropagation();
					event.preventDefault();
					boolStop = false;
				}
			});
 
			$("#accordion").accordion({
				header: "> div > h3",
				collapsible: true,
				active: false,
				autoHeight: false
			}).sortable({
				axis: "y",
				handle: "h3",
				stop: function() {
					boolStop = true;
				}
			});
 
			$("#btnAddSection").click(function(){
				$("<div/>", {
					"html": '<h3><a href="#">Section X</a></h3>' +
							'<div>' +
								'<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>' +
							'</div>'
				}).appendTo("#accordion");
 
				var obj = $("#accordion");
 
				obj.accordion("destroy").accordion({
					header: "> div > h3",
					collapsible: true,
					active: false,
					autoHeight: false
				});
 
				obj.sortable("destroy").sortable({
					axis: "y",
					handle: "h3",
					stop: function() {
						boolStop = true;
					}
				});
			});
		});
	</script>
</body>  
</html>

Il ne faut pas utiliser data("accordionSettings"), ce n'est pas fiable.

D'ailleurs dans mon exemple http://www.developpez.net/forums/ano...e2cffde50b747d je ne l'employais pas.

**danielhagnoul** · 27/05/2011, 12h23

Amélioration du code de test :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
$(function(){
 
	var boolStop = false,
		objAccordion = $("#accordion"),
		objAccordionOptions = {
			header: "> div > h3",
			collapsible: true,
			active: false,
			autoHeight: false
		},
		objSortableOptions = {
			axis: "y",
			handle: "h3",
			stop: function() {
				boolStop = true;
			}
		};
 
	$("#accordion h3").click(function( event ) {
		if ( boolStop ) {
			event.stopImmediatePropagation();
			event.preventDefault();
			boolStop = false;
		}
	});
 
	$("#accordion").accordion(objAccordionOptions).sortable(objSortableOptions);
 
	$("#btnAddSection").click(function(){
		$("<div/>", {
			"html": '<h3><a href="#">Section X</a></h3>' +
					'<div>' +
						'<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>' +
					'</div>'
		}).appendTo("#accordion");
 
		objAccordion.accordion("destroy").accordion(objAccordionOptions);
 
		objAccordion.sortable("destroy").sortable(objSortableOptions);
	});
});

**TheDoci** · 27/05/2011, 19h14

Merci beaucoup

UI Accordion. Impossible d'ajouter un item dans un autre item Accordion vide

jQuery

Discussions similaires

Partager

Partager