New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nested collapsible widgets are broken when data-enhaced="true" #7413

Closed
jbesta opened this Issue May 20, 2014 · 3 comments

Comments

Projects
None yet
3 participants
@jbesta

jbesta commented May 20, 2014

Problem

Considering following HTML snippet (which is provided below) with nested enhanced collapsible widgets does not work as expected.

Check this fiddle

Current behavior

  • by clicking button "Level2" (from snippet bellow) both collapsible contents are collapsed

Expected behaviour

  • by clicking "Level2" only its nearest ui-colapsible-content should be collapsed

Version

JQM 1.4.2

Suggested solution

jQuery selectors for matching widget's heading, content etc are broken and they also match elemenents in nested (http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js, lines 6783 - 6786). Fix those selectors.

HTML snippet

<div class="ui-collapsible expand-list ui-collapsible-themed-content"
                         data-iconpos="right" data-inset="false"
                         data-expanded-icon="carat-u"
                         data-collapsed-icon="carat-r" data-theme="b"
                         data-collapsed="false" data-role="collapsible"
                         data-enhanced="true">
                        <h3
                            class="ui-collapsible-heading"><a
                            class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-btn-b ui-icon-carat-u"
                            href="#">Level1<span
                            class="ui-collapsible-heading-status"> click to collapse contents</span></a>
                        </h3>

                        <div class="ui-collapsible-content ui-body-inherit"
                             aria-hidden="false">

                            <div>
                                <div class="ui-collapsible expand-list ui-collapsible-themed-content"
                                     data-iconpos="right" data-inset="false"
                                     data-expanded-icon="carat-u"
                                     data-collapsed-icon="carat-r"
                                     data-theme="b" data-collapsed="false" data-enhanced="true"
                                     data-role="collapsible"><h3
                                        class="ui-collapsible-heading"><a
                                        class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-btn-b ui-icon-carat-u"
                                        href="#">Level2<span
                                        class="ui-collapsible-heading-status"> click to collapse contents</span></a>
                                </h3>

                                    <div class="ui-collapsible-content ui-body-inherit"
                                         aria-hidden="false">

                                        <div>
                                           Content
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 5, 2014

Member

I can confirm the issue on OS X / Chrome. Here are JS Bin test pages using latest code...

It works fine if the framework enhances the collapsibles: http://jsbin.com/AKOmUxa/172/edit
But it's broken when using data-enhanced="true": http://jsbin.com/AKOmUxa/174/edit

Member

jaspermdegroot commented Jun 5, 2014

I can confirm the issue on OS X / Chrome. Here are JS Bin test pages using latest code...

It works fine if the framework enhances the collapsibles: http://jsbin.com/AKOmUxa/172/edit
But it's broken when using data-enhanced="true": http://jsbin.com/AKOmUxa/174/edit

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jun 6, 2014

Contributor

Our selectors were too broad.

Contributor

gabrielschulhof commented Jun 6, 2014

Our selectors were too broad.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jun 6, 2014

Contributor

We really should avoid recursive selection, like .find() and $( selector, element ) when constructing pre-rendered containers.

Contributor

gabrielschulhof commented Jun 6, 2014

We really should avoid recursive selection, like .find() and $( selector, element ) when constructing pre-rendered containers.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment