Topic: Dynamic Menu jQuery

pleal1976 pro asked 5 years ago


I am trying to build a menu up dynamically, but the accordion function isn't working.  I have looked at the structure of the Side Nav from the demos and I have copied it completely and it still isn't working.  If I put in a few menu items that are not dynamic (thereby combining a static and dynamic menu) the static menu items will work as expected, but the dynamic ones will not.

 

Please advise.

Thanks,

Tim


Jakub Strebeyko staff answered 5 years ago


Hi @cdenby,

Thanks for input! It is so cool to see people experimenting with the library. :)

Yes, this is what I meant with the comment to my initial response - .collapsible() does CSS magic on element that must be there first for it to work. Simply calling the method at the end of data load callback should fix the issue.

I will turn to jQuery dev team to build upon existing docs to include what was said here.
Q: Which docs page you thing would be the best to include information about dynamically loaded content?

With Best Regards,
Kuba


cdenby pro answered 5 years ago


Now I think I have it.

I removed the .submenu and simply called 

$(".collapsible").collapsible();

after the content was loaded.

Hopefully that will do the trick and be stable.


cdenby pro answered 5 years ago


I spoke too soon. Seemed to work fine as long as there was only one submenu in the whole sideNav. Now even with $(".submenu").each(function... I can't get the submenus to activate.

I'd really like more detailed information on this to figure out how to activate the menus.


cdenby pro answered 5 years ago


I think I have the solution to this finally after having struggled for more than a year on it.

The trick is to use their demo pages and steal the submenu, but then make a couple of key changes (apart from the "far" classes for the fa-icons).

I added the classes "submenu" and "collapsible" to the div. Then add the following code after the submenu is loaded through ajax:

<div class="collapsible-body submenu collapsible">
<ul class="list-unstyled">
<li><a href="#" class="waves-effect">FAQ</a></li>
<li><a href="#" class="waves-effect">Contact</a></li>
<li><a href="#" class="waves-effect">About</a></li>
... etc
</ul>
</div>

--Javascript after ajax load of menu:
$(".submenu").collapsible();

 


Jakub Strebeyko staff answered 5 years ago


Hi there Tim,

Welcome to the support board! In general, the accordion was designed to handle static content, which covers 99% of use cases. Collapsible functionality is based on directly modifying elements' CSS properties, being evaluated on initial render only - with no way of having the accordion know whether something changed afterwards without going full async with the function. Please, include a snippet of your code for us to pinpoint the issue in the implementation and to know what your expectations are. If the will remains strong enough gathering some more people, the feature request would definitely get considered for a future release.

With Best Regards,
Kuba 


pleal1976 pro commented 5 years ago

So, what I am hearing is that there is no way to re-evaluate the menu by calling a method? What method is called initially? Can I modify that code to be able to call the method to re-evaluate the menu?

Thanks,
Tim


Jakub Strebeyko staff commented 5 years ago

Hi Tim,

No, this is not what I'm saying - the issue here is rather that it does not happen by itself after the data is loaded, unless you explicitly ask it to.

The .collapsible() method is being called from inside the IIFE (Immediately Invoked Function Expression) for all the .collapsible elements out there  -- at the time of initial render only, I believe.

You are free to modify the code as you like, you can find the call at line 19897 in mdb.js 4.6.0. I don't think you would even need to modify the method to be able to call it - just make sure it happens after the data is there.

In my snippet-less journey I also noticed that adding items dynamically into the .collapsible-body element works as expected.

Best,
Kuba



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.15
  • Device: Laptop
  • Browser: IE 11
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No