#7409 closed bug (notabug)

Opened May 21, 2011 09:26AM UTC

Closed June 05, 2011 07:58AM UTC

Creating inner-accordions into an empty accordion

Reported by:	TheDoci	Owned by:	TheDoci
Priority:	minor	Milestone:	1.9.0
Component:	ui.accordion	Version:	1.8.13
Keywords:		Cc:
Blocked by:		Blocking:

Description

When we have inner-accordions, the destroy-recreate method to refresh an accordion after adding some panels doesn't work correctly.

When you click on the button in the second accordion it adds a section into it. But the sub-accordion doesn't work (in spite of the desctruction-recreation of the accordion).

Test it : http://jsfiddle.net/YL99D/

BUT if you modify the HTML code this way (add a first section in the #sections div), it works perfectly when we click the button : http://jsfiddle.net/YL99D/1/

Additionnal information :

version of JQuery : 1.5.1
browser : Firefox 4.0.1
operating system : Windows 7 64 bits Family Edition

Attachments (0)

Change History (3)

Changed May 21, 2011 12:26PM UTC by scottgonzalez comment:1

description:	When we have inner-accordions, the destroy-recreate method to refresh an accordion after adding some panels doesn't work correctly. \ \ Here is the HTML code : \ \ {{{ \ <div id="main-content"> \ <h3><a href="#">Accordion 1</a></h3> \ <div> \ Content 1 \ </div> \ \ <h3><a href="#">Accordion 2</a></h3> \ <div> \ Content 2<br /> \ <input type="button" value="Add a new section" id="add-section" /><br /><br /> \ \ Sections :<br /> \ <div id="sections"></div> \ </div> \ </div> \ }}} \ \ \ Here is the corresponding Javascript code : \ \ {{{ \ $(function() { \ /* The main accordions / \ $( "#main-content" ).accordion({ \ collapsible: true, \ active: 0, \ autoHeight: false \ }); \ \ / The different sections of the second accordion / \ $( "#sections" ) \ .data("sectionsAccordionSettings", { \ header: "> div > h3", \ collapsible: true, \ active: false, \ autoHeight: false \ }) \ .accordion($("#sections").data("sectionsAccordionSettings")); \ \ / The questions selected for the questionnaire are sortable / \ $(".sub-accordions") \ .data("subAccordionSettings", { \ header: "> div > h3", \ collapsible: true, \ active: false, \ autoHeight: false \ }) \ .accordion($(".sub-accordions").data("subAccordionSettings")); \ \ / Adding a new section to the second accordion can be done by clicking this element / \ $("#add-section").live('click', function() { \ var sectionsBlock = $("#sections"); \ var section = '<div id="sections_new1">' + \ '<h3><a href="#">Section</a></h3>' + \ '<div>' + \ 'Section content :<br />' + \ '<div class="sub-accordions">' + \ '<div>' + \ '<h3><a href="#">Sub accordion.</a></h3>' + \ '<div>Sub accordion content</div>' + \ '</div>' \ '</div>' + \ '</div>' + \ '</div>'; \ sectionsBlock.append(section); \ \ // Refresh the accordions \ sectionsBlock.accordion('destroy').accordion(sectionsBlock.data('sectionsAccordionSettings')); \ var subAccordionsBlock = $('.sub-accordions'); \ subAccordionsBlock.accordion('destroy').accordion(subAccordionsBlock.data('subAccordionSettings')); \ }); \ }); \ }}} \ \ When you click on the button in the second accordion it adds a section into it. But the sub-accordion doesn't work (in spite of the desctruction-recreation of the accordion). \ Test it : http://jsfiddle.net/YL99D/ \ \ BUT if you modify the HTML code this way (add a first section in the #sections div), it works perfectly when we click the button : \ \ {{{ \ <div id="main-content"> \ <h3><a href="#">Accordion 1</a></h3> \ <div> \ Content 1 \ </div> \ \ <h3><a href="#">Accordion 2</a></h3> \ <div> \ Content 2<br /> \ <input type="button" value="Add a new section" id="add-section" /><br /><br /> \ \ Sections :<br /> \ <div id="sections"> \ <div id="sections_new1"> \ <h3><a href="#">Section</a></h3> \ <div> \ Section content :<br /> \ <div class="sub-accordions"> \ <div> \ <h3><a href="#">Sub accordion.</a></h3> \ <div>Sub accordion content</div> \ </div> \ </div> \ </div> \ </div> \ </div> \ </div> \ </div> \ }}} \ \ Test it : http://jsfiddle.net/YL99D/1/ \ \ I have looked at the generated HTML codes and I have found something interesting : \ First look at the code generated when I have put a hard-coded section in the #sections div : \ \ {{{ \ <div id="sections" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist"> \ <div id="sections_new1"> \ <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0"> \ <span class="ui-icon ui-icon-triangle-1-s"></span> \ <a href="#" tabindex="-1">Section</a> \ </h3> \ <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role="tabpanel" style="display: block;"> \ Section content : \ <br> \ <div class="sub-accordions ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist"> \ <div> \ <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-state-hover" role="tab" aria-expanded="false" aria-selected="false" tabindex="0"> \ <span class="ui-icon ui-icon-triangle-1-e"></span> \ <a href="#" tabindex="-1">Sub accordion.</a> \ </h3> \ <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="display: none;">Sub accordion content</div> \ </div> \ </div> \ </div> \ </div> \ </div> \ }}} \ \ Now look at the code generated when I let the #sections div empty : \ \ {{{ \ <div id="sections" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist"> \ <div id="sections_new1"> \ <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0"> \ <span class="ui-icon ui-icon-triangle-1-s"></span> \ <a href="#" tabindex="-1">Section</a> \ </h3> \ <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role="tabpanel" style="display: block;"> \ Section content : \ <br> \ <div class="sub-accordions ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist"> \ <div class="ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top ui-state-hover" role="tab" aria-expanded="true" aria-selected="true" tabindex="0"> \ <span class="ui-icon ui-icon-triangle-1-s"></span> \ <h3> \ <a href="#" tabindex="-1">Sub accordion.</a> \ </h3> \ <div>Sub accordion content</div> \ </div> \ </div> \ </div> \ </div> \ </div> \ }}} \ \ The classes are badly set. \ \ Additionnal information : \ version of JQuery : 1.5.1 \ * browser : Firefox 4.0.1 \ * operating system : Windows 7 64 bits Family Edition → When we have inner-accordions, the destroy-recreate method to refresh an accordion after adding some panels doesn't work correctly. \ \ \ When you click on the button in the second accordion it adds a section into it. But the sub-accordion doesn't work (in spite of the desctruction-recreation of the accordion). \ Test it : http://jsfiddle.net/YL99D/ \ \ BUT if you modify the HTML code this way (add a first section in the #sections div), it works perfectly when we click the button : http://jsfiddle.net/YL99D/1/ \ \ Additionnal information : \ * version of JQuery : 1.5.1 \ * browser : Firefox 4.0.1 \ * operating system : Windows 7 64 bits Family Edition

description:

When we have inner-accordions, the destroy-recreate method to refresh an accordion after adding some panels doesn't work correctly. \ \ Here is the HTML code : \ \ {{{ \ <div id="main-content"> \ <h3><a href="#">Accordion 1</a></h3> \ <div> \ Content 1 \ </div> \ \ <h3><a href="#">Accordion 2</a></h3> \ <div> \ Content 2<br /> \ <input type="button" value="Add a new section" id="add-section" /><br /><br /> \ \ Sections :<br /> \ <div id="sections"></div> \ </div> \ </div> \ }}} \ \ \ Here is the corresponding Javascript code : \ \ {{{ \ $(function() { \ /* The main accordions */ \ $( "#main-content" ).accordion({ \ collapsible: true, \ active: 0, \ autoHeight: false \ }); \ \ /* The different sections of the second accordion */ \ $( "#sections" ) \ .data("sectionsAccordionSettings", { \ header: "> div > h3", \ collapsible: true, \ active: false, \ autoHeight: false \ }) \ .accordion($("#sections").data("sectionsAccordionSettings")); \ \ /* The questions selected for the questionnaire are sortable */ \ $(".sub-accordions") \ .data("subAccordionSettings", { \ header: "> div > h3", \ collapsible: true, \ active: false, \ autoHeight: false \ }) \ .accordion($(".sub-accordions").data("subAccordionSettings")); \ \ /* Adding a new section to the second accordion can be done by clicking this element */ \ $("#add-section").live('click', function() { \ var sectionsBlock = $("#sections"); \ var section = '<div id="sections_new1">' + \ '<h3><a href="#">Section</a></h3>' + \ '<div>' + \ 'Section content :<br />' + \ '<div class="sub-accordions">' + \ '<div>' + \ '<h3><a href="#">Sub accordion.</a></h3>' + \ '<div>Sub accordion content</div>' + \ '</div>' \ '</div>' + \ '</div>' + \ '</div>'; \ sectionsBlock.append(section); \ \ // Refresh the accordions \ sectionsBlock.accordion('destroy').accordion(sectionsBlock.data('sectionsAccordionSettings')); \ var subAccordionsBlock = $('.sub-accordions'); \ subAccordionsBlock.accordion('destroy').accordion(subAccordionsBlock.data('subAccordionSettings')); \ }); \ }); \ }}} \ \ When you click on the button in the second accordion it adds a section into it. But the sub-accordion doesn't work (in spite of the desctruction-recreation of the accordion). \ Test it : http://jsfiddle.net/YL99D/ \ \ BUT if you modify the HTML code this way (add a first section in the #sections div), it works perfectly when we click the button : \ \ {{{ \ <div id="main-content"> \ <h3><a href="#">Accordion 1</a></h3> \ <div> \ Content 1 \ </div> \ \ <h3><a href="#">Accordion 2</a></h3> \ <div> \ Content 2<br /> \ <input type="button" value="Add a new section" id="add-section" /><br /><br /> \ \ Sections :<br /> \ <div id="sections"> \ <div id="sections_new1"> \ <h3><a href="#">Section</a></h3> \ <div> \ Section content :<br /> \ <div class="sub-accordions"> \ <div> \ <h3><a href="#">Sub accordion.</a></h3> \ <div>Sub accordion content</div> \ </div> \ </div> \ </div> \ </div> \ </div> \ </div> \ </div> \ }}} \ \ Test it : http://jsfiddle.net/YL99D/1/ \ \ I have looked at the generated HTML codes and I have found something interesting : \ First look at the code generated when I have put a hard-coded section in the #sections div : \ \ {{{ \ <div id="sections" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist"> \ <div id="sections_new1"> \ <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0"> \ <span class="ui-icon ui-icon-triangle-1-s"></span> \ <a href="#" tabindex="-1">Section</a> \ </h3> \ <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role="tabpanel" style="display: block;"> \ Section content : \ <br> \ <div class="sub-accordions ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist"> \ <div> \ <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-state-hover" role="tab" aria-expanded="false" aria-selected="false" tabindex="0"> \ <span class="ui-icon ui-icon-triangle-1-e"></span> \ <a href="#" tabindex="-1">Sub accordion.</a> \ </h3> \ <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="display: none;">Sub accordion content</div> \ </div> \ </div> \ </div> \ </div> \ </div> \ }}} \ \ Now look at the code generated when I let the #sections div empty : \ \ {{{ \ <div id="sections" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist"> \ <div id="sections_new1"> \ <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0"> \ <span class="ui-icon ui-icon-triangle-1-s"></span> \ <a href="#" tabindex="-1">Section</a> \ </h3> \ <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role="tabpanel" style="display: block;"> \ Section content : \ <br> \ <div class="sub-accordions ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist"> \ <div class="ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top ui-state-hover" role="tab" aria-expanded="true" aria-selected="true" tabindex="0"> \ <span class="ui-icon ui-icon-triangle-1-s"></span> \ <h3> \ <a href="#" tabindex="-1">Sub accordion.</a> \ </h3> \ <div>Sub accordion content</div> \ </div> \ </div> \ </div> \ </div> \ </div> \ }}} \ \ The classes are badly set. \ \ Additionnal information : \ * version of JQuery : 1.5.1 \ * browser : Firefox 4.0.1 \ * operating system : Windows 7 64 bits Family Edition → When we have inner-accordions, the destroy-recreate method to refresh an accordion after adding some panels doesn't work correctly. \ \ \ When you click on the button in the second accordion it adds a section into it. But the sub-accordion doesn't work (in spite of the desctruction-recreation of the accordion). \ Test it : http://jsfiddle.net/YL99D/ \ \ BUT if you modify the HTML code this way (add a first section in the #sections div), it works perfectly when we click the button : http://jsfiddle.net/YL99D/1/ \ \ Additionnal information : \ * version of JQuery : 1.5.1 \ * browser : Firefox 4.0.1 \ * operating system : Windows 7 64 bits Family Edition

In the future, please do not dump tons of code into the ticket.

Changed May 21, 2011 12:33PM UTC by scottgonzalez comment:2

owner:	→ TheDoci
status:	new → pending

This test doesn't look correct at all. You're destroying widgets that never exist and reading data off widgets that don't have any data. Please provide an even more reduced test case showing the problem or use the forums for help.

Changed June 05, 2011 07:58AM UTC by trac-o-bot comment:3

resolution:	→ invalid
status:	pending → closed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!