Drilldown population via Ajax after DOM has loaded

[richbaked]

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:

• option 1
  • my account - CLICK EVENT HERE!
  • other item
  • other item
• option 2

And I'm adding content when they click the 'CLICK EVENT HERE!' so that it looks like this:

• option 1
  • my account - CLICK EVENT HERE!
    • my account - option 1
    • my account - option 2
    • my account - option 3
  • other item
  • other item
• option 2

What happens instead?

2 things:

1. 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.

2. 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

1. 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.

2. 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

1. navigate down menus
2. click simulate ajax
3. navigate up and down to see changes

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

• Foundation version(s) used: 6.5.1.
• Browser(s) name and version(s): Chrome
• Device, Operating System and version: laptop / mobile / Windows 11 / android
• Link to your project: It's outside GitHub

Checklist

• I have read and follow the CONTRIBUTING.md document. yes
• There are no other issues similar to this one.
• The issue title and template are correctly filled.

[amazingsey]

Hi @richbaked
I think the drilldown menu is behaving like intended. When you add dynamic items to it and reinit, the dynamically added sub items would behave like drilldown sub menu items.

If your intended output is to put content under the click event item list then

1. Introduce container element for your dynamic content like e.g. ".sub-content" div element
   ..<a href="#"> <div class="content">...</div> </a> <div class="sub-content"><!-- DYNAMIC CONTENT HERE --></div> ...

2. then append (or rather replace) the content of the ".sub-content" element with the dynamic content like so..
   parentLi.find('>.sub-content')[0].innerHTML = newSubMenu;
   (modified snippet from your codepen https://codepen.io/Richard-Garner/pen/RwvPZVW)

3. No need to reinit foundation drilldown

Hope this helps