Changes between Initial Version and Version 1 of Ticket #7409


Ignore:
Timestamp:
May 21, 2011, 8:26:51 AM (12 years ago)
Author:
Scott González
Comment:

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

Legend:

Unmodified
Added
Removed
Modified

  • Ticket #7409 – Description

    initial v1  
    11When we have inner-accordions, the destroy-recreate method to refresh an accordion after adding some panels doesn't work correctly.
    22
    3 Here is the HTML code :
    4 
    5 {{{
    6 <div id="main-content">
    7     <h3><a href="#">Accordion 1</a></h3>
    8     <div>
    9         Content 1
    10     </div>
    11    
    12     <h3><a href="#">Accordion 2</a></h3>
    13     <div>
    14         Content 2<br />
    15         <input type="button" value="Add a new section" id="add-section" /><br /><br />
    16        
    17         Sections :<br />
    18         <div id="sections"></div>
    19     </div>
    20 </div>
    21 }}}
    22 
    23 
    24 Here is the corresponding Javascript code :
    25 
    26 {{{
    27 $(function() {
    28     /* The main accordions */
    29     $( "#main-content" ).accordion({
    30         collapsible: true,
    31         active: 0,
    32         autoHeight: false
    33     });
    34    
    35     /* The different sections of the second accordion */
    36     $( "#sections" )
    37     .data("sectionsAccordionSettings", {
    38         header: "> div > h3",
    39         collapsible: true,
    40         active: false,
    41         autoHeight: false
    42     })
    43     .accordion($("#sections").data("sectionsAccordionSettings"));
    44    
    45     /* The questions selected for the questionnaire are sortable */
    46     $(".sub-accordions")
    47     .data("subAccordionSettings", {
    48         header: "> div > h3",
    49         collapsible: true,
    50         active: false,
    51         autoHeight: false
    52     })
    53     .accordion($(".sub-accordions").data("subAccordionSettings"));
    54    
    55     /* Adding a new section to the second accordion can be done by clicking this element */
    56     $("#add-section").live('click', function() {
    57         var sectionsBlock = $("#sections");
    58         var section = '<div id="sections_new1">' +
    59                             '<h3><a href="#">Section</a></h3>' +
    60                             '<div>' +
    61                                 'Section content :<br />' +
    62                                 '<div class="sub-accordions">' +
    63                                     '<div>' +
    64                                         '<h3><a href="#">Sub accordion.</a></h3>' +
    65                                         '<div>Sub accordion content</div>' +
    66                                     '</div>'
    67                                 '</div>' +
    68                             '</div>' +
    69                         '</div>';
    70         sectionsBlock.append(section);
    71        
    72         // Refresh the accordions
    73         sectionsBlock.accordion('destroy').accordion(sectionsBlock.data('sectionsAccordionSettings'));
    74         var subAccordionsBlock = $('.sub-accordions');
    75         subAccordionsBlock.accordion('destroy').accordion(subAccordionsBlock.data('subAccordionSettings'));
    76     });
    77 });
    78 }}}
    793
    804When 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).
    815Test it : http://jsfiddle.net/YL99D/
    826
    83 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 :
    84 
    85 {{{
    86 <div id="main-content">
    87     <h3><a href="#">Accordion 1</a></h3>
    88     <div>
    89         Content 1
    90     </div>
    91    
    92     <h3><a href="#">Accordion 2</a></h3>
    93     <div>
    94         Content 2<br />
    95         <input type="button" value="Add a new section" id="add-section" /><br /><br />
    96        
    97         Sections :<br />
    98         <div id="sections">
    99             <div id="sections_new1">
    100                 <h3><a href="#">Section</a></h3>
    101                 <div>
    102                     Section content :<br />
    103                     <div class="sub-accordions">
    104                         <div>
    105                             <h3><a href="#">Sub accordion.</a></h3>
    106                             <div>Sub accordion content</div>
    107                         </div>
    108                     </div>
    109                 </div>
    110             </div>
    111         </div>
    112     </div>
    113 </div>
    114 }}}
    115 
    116 Test it : http://jsfiddle.net/YL99D/1/
    117 
    118 I have looked at the generated HTML codes and I have found something interesting :
    119 First look at the code generated when I have put a hard-coded section in the #sections div :
    120 
    121 {{{
    122 <div id="sections" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
    123     <div id="sections_new1">
    124         <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
    125             <span class="ui-icon ui-icon-triangle-1-s"></span>
    126             <a href="#" tabindex="-1">Section</a>
    127         </h3>
    128         <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role="tabpanel" style="display: block;">
    129             Section content :
    130             <br>
    131             <div class="sub-accordions ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
    132                 <div>
    133                     <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">
    134                         <span class="ui-icon ui-icon-triangle-1-e"></span>
    135                         <a href="#" tabindex="-1">Sub accordion.</a>
    136                     </h3>
    137                     <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="display: none;">Sub accordion content</div>
    138                 </div>
    139             </div>
    140         </div>
    141     </div>
    142 </div>
    143 }}}
    144 
    145 Now look at the code generated when I let the #sections div empty :
    146 
    147 {{{
    148 <div id="sections" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
    149     <div id="sections_new1">
    150         <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
    151             <span class="ui-icon ui-icon-triangle-1-s"></span>
    152             <a href="#" tabindex="-1">Section</a>
    153         </h3>
    154         <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role="tabpanel" style="display: block;">
    155             Section content :
    156             <br>
    157             <div class="sub-accordions ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
    158                 <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">
    159                     <span class="ui-icon ui-icon-triangle-1-s"></span>
    160                     <h3>
    161                         <a href="#" tabindex="-1">Sub accordion.</a>
    162                     </h3>
    163                     <div>Sub accordion content</div>
    164                 </div>
    165             </div>
    166         </div>
    167     </div>
    168 </div>
    169 }}}
    170 
    171 The classes are badly set.
     7BUT 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/
    1728
    1739Additionnal information :