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

Dynamically added elements to an accordion don't work. #1659

Closed
orszaczky opened this Issue Dec 9, 2015 · 4 comments

Comments

Projects
None yet
4 participants
@orszaczky

orszaczky commented Dec 9, 2015

I'm trying to add new accordion sections to my UIKit data-uk-accordion dynamically, and when I click on the title, it throws the following error:

TypeError: wrapper is undefined, on line 73 of accordion.js in UIkit 2.24.2: wrapper.data('toggle').toggleClass(this.options.clsactive);

I tried adding data-uk-observe to the accordion div, or its parent divs but didn't have any effect, and also tried to reinit the accordion manually by adding it an id, and running UIkit.accordion('#id'), but no change.

There seem to be two related issues on stackoverflow, both unanswered:
http://stackoverflow.com/questions/34189220/uikit-accordion-and-ng-repeat-doesnt-work
http://stackoverflow.com/questions/33731080/how-to-correctly-append-dynamic-getuikit-accordions

Is this a bug, or is there a the proper way of reinitializing the accordion?

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Jan 20, 2016

All components can be initialized manually by JS as followed UIkit.accordion($('#elementID'), {option: 'value'});

Omit the data-uk-accordion attribute to prevent the component from booting before you want it to.

https://jsfiddle.net/Greggg/mp0ksw63/

ghost commented Jan 20, 2016

All components can be initialized manually by JS as followed UIkit.accordion($('#elementID'), {option: 'value'});

Omit the data-uk-accordion attribute to prevent the component from booting before you want it to.

https://jsfiddle.net/Greggg/mp0ksw63/

@whitelynx

This comment has been minimized.

Show comment
Hide comment
@whitelynx

whitelynx Mar 11, 2016

@ZeGregg: That helps for controlling initialization time, but it doesn't help if you need to add more elements after you've already initialized. Omitting data-uk-accordion and instead doing UIkit.accordion($('#elementID'), {collapse: false}) instantly gives me the error the OP described:

Uncaught TypeError: Cannot read property 'data' of undefined
UI.component.toggleItem @   VM475 /home/dbronke/devel/personal/querytron/node_modules/uikit/dist/js/components/accordion.js:73
(anonymous function)    @   VM475 /home/dbronke/devel/personal/querytron/node_modules/uikit/dist/js/components/accordion.js:59
jQuery.event.dispatch   @   /home/dbronke/devel/personal/querytron/node_modules/jquery/dist/jquery.js:4732
elemData.handle @   /home/dbronke/devel/personal/querytron/node_modules/jquery/dist/jquery.js:4544

Adding showfirst: false to the options delays that error until the first time you try clicking an accordion title, but then it shows the same exact error.

whitelynx commented Mar 11, 2016

@ZeGregg: That helps for controlling initialization time, but it doesn't help if you need to add more elements after you've already initialized. Omitting data-uk-accordion and instead doing UIkit.accordion($('#elementID'), {collapse: false}) instantly gives me the error the OP described:

Uncaught TypeError: Cannot read property 'data' of undefined
UI.component.toggleItem @   VM475 /home/dbronke/devel/personal/querytron/node_modules/uikit/dist/js/components/accordion.js:73
(anonymous function)    @   VM475 /home/dbronke/devel/personal/querytron/node_modules/uikit/dist/js/components/accordion.js:59
jQuery.event.dispatch   @   /home/dbronke/devel/personal/querytron/node_modules/jquery/dist/jquery.js:4732
elemData.handle @   /home/dbronke/devel/personal/querytron/node_modules/jquery/dist/jquery.js:4544

Adding showfirst: false to the options delays that error until the first time you try clicking an accordion title, but then it shows the same exact error.

@whitelynx

This comment has been minimized.

Show comment
Hide comment
@whitelynx

whitelynx Mar 11, 2016

In poking at the return value of UIkit.accordion(), it seems that the correct solution is to call .update() on that returned object. This should really be documented somewhere; I haven't found any mentions of what to do with the return value of any UIkit.*() function call. (and even using a site search, I can't find any mention of the .update() method in the docs)

var accordion = UIkit.accordion($('#elementID'), {collapse: false});
// ...later...
accordion.update();

whitelynx commented Mar 11, 2016

In poking at the return value of UIkit.accordion(), it seems that the correct solution is to call .update() on that returned object. This should really be documented somewhere; I haven't found any mentions of what to do with the return value of any UIkit.*() function call. (and even using a site search, I can't find any mention of the .update() method in the docs)

var accordion = UIkit.accordion($('#elementID'), {collapse: false});
// ...later...
accordion.update();
@philoest

This comment has been minimized.

Show comment
Hide comment
@philoest

philoest Jan 12, 2017

Contributor

We have released the next major version, UIkit3. To start focusing our work on the most recent release, we decided to close all the issues related to UIkit2. Please check, if these issues still persist in version 3 and if so, please open a new issue.

Thanks for your understanding,
Your UIkit Team

Contributor

philoest commented Jan 12, 2017

We have released the next major version, UIkit3. To start focusing our work on the most recent release, we decided to close all the issues related to UIkit2. Please check, if these issues still persist in version 3 and if so, please open a new issue.

Thanks for your understanding,
Your UIkit Team

@philoest philoest closed this Jan 12, 2017

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