-
Notifications
You must be signed in to change notification settings - Fork 5.5k
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
Drilldown population via Ajax after DOM has loaded #12598
Comments
Hi @richbaked If your intended output is to put content under the click event item list then
Hope this helps |
What should happen?
Firstly, I love drilldown! It's great. I've got a drilldown menu working fine. I want to make the menu dynamic so that I can add list-items and even sub-menus for say different users. I've set this up so that when a user clicks a list-item that i call the next sub-menu via ajax and insert it into the menu tree.
i.e starts like this:
And I'm adding content when they click the 'CLICK EVENT HERE!' so that it looks like this:
What happens instead?
2 things:
When I add dynamic content within the menu it either re-initialises from the top i.e. takes the user back to the top of the menu and strangely then skips a level to go to the newly added content (until you click back and somehow it's how it is hierarchically organised again). Or if I target the element I've added it creates a new drilldown menu div there - i.e. a tree within a tree.
When I add submenus or list items by loading the ajax and then inserting it into the menu it seems to break the architecture in a similar way - i'm trying to kinda pre-fetch a sub-menu below a list item when the user clicks on the content within the list item.
Possible Solution
My guess is that I'm either not adding the dynamic content in a format that is suitable for the existing tree or that the tree isn't able to accept dynamic content without re-initialising the whole tree which takes the user back to the top of the menu which breaks the journey.
That when I try to load a submenu via ajax that it's happening too slowly and that by the time I've added it, the foundation.js has done it's thing and the content is too late so without having some way to unbind the click event, load my dynamic content and then rebind the click I'm always going to break the menu.
...
Test Case and/or Steps to Reproduce (for bugs)
Test Case:
This is the code pen showing using js to dynamically add a submenu. Clicking 'simulate ajax' appends a submenu into the html tree.
https://codepen.io/Richard-Garner/pen/RwvPZVW
This is a code pen that that re-initialises at the point of the new content being added in the tree - that creates a new tree within the existing tree rather than appending it (but it at least doesn't
https://codepen.io/Richard-Garner/pen/PoVqOKv
How to reproduce: see codepens above
Context
I'm trying to essentially pre-fetch submenu content so that the drilldown can be populated dynamically depending on what a user selects.
Your Environment
Checklist
The text was updated successfully, but these errors were encountered: