Sign in


Sign up


create sidenav dynamically

MDB SupportCategory: MDB jQuerycreate sidenav dynamically
Oscar Bejarano Pro User asked 1 week ago in MDB pro, version:4.4

hi, i am fetching data on database for create menu items for sidenav, but, when i append the content, it doesnt works, i mean, the menu item doesn’t collapse for show his childs. i took the generate content and pasted it directly to html file and it works, then i think that the problem is that when i append the content, the sidenav already has initialized. how can i resolve this problem? regards.

 

pdta: this is the generate html. i tried to use $(“.button-collapse”).sidenav() after to append the content but it doesn’t work.

<ul class="collapsible collapsible-accordion">
 <li>
 <a class="collapsible-header waves-effect arrow-r">
 <i class="fa fa-cubes fa-3x" aria-hidden="true"></i> Reportes
 <i class="fa fa-angle-down rotate-icon"></i>
 </a>
 <div class="collapsible-body">
 <ul>
 <li>
 <ul class="collapsible collapsible-accordion">
 <li>
 <a class="collapsible-header waves-effect arrow-r">
 <i class="fa fa-cube" aria-hidden="true"></i> SmartREMODB
 <i class="fa fa-angle-down rotate-icon"></i>
 </a>
 <div class="collapsible-body">
 <ul><li>
 <a class="waves-effect arrow-r">
 <i class="fa fa-database" aria-hidden="true"></i> Local
 </a>
 </li>
 <li>
 <a class="waves-effect arrow-r">
 <i class="fa fa-database" aria-hidden="true"></i> Batch
 </a>
 </li>
 <li>
 <a class="waves-effect arrow-r">
 <i class="fa fa-database" aria-hidden="true"></i> N&R
 </a>
 </li>
 <li>
 <a class="waves-effect arrow-r">
 <i class="fa fa-database" aria-hidden="true"></i> AIGBodega
 </a>
 </li>
 <li>
 <a class="waves-effect arrow-r">
 <i class="fa fa-database" aria-hidden="true"></i> AIG
 </a>
 </li>
 <li>
 <a class="waves-effect arrow-r">
 <i class="fa fa-database" aria-hidden="true"></i> Deceval
 </a>
 </li>
 </ul></div></li></ul></li>
 </ul>
 </div>
 </li>
 <li>
 <a class="collapsible-header waves-effect arrow-r">
 <i class="fa fa-chevron-right mr-1"></i> Administrador
 <i class="fa fa-angle-down rotate-icon"></i>
 </a>
 </li>
 </ul>
1 Answers
Mikołaj Smoleński answered 1 week ago

Hi again Oscar,

Are You sure that dynamic content is loaded from the same folder as index file? Very often content is not working dynamically because it has bad source connections with css and js files.

Regards

Oscar Bejarano Pro User replied 1 week ago

hi, Mikolaj, i found the solution, after to load the dynamic content you must to set $(‘.collapsible’).collapsible(); for load the collapsible logic again, that´s all, thanks for the help, regards.

pdta: you maybe want to add this point to the documentation.

Oscar Bejarano Pro User replied 1 week ago

hi, i think that i found the problem, when i click on a.collapsible-header, it doesn't add the .active class itself nor add the display: block property style to collapsible-body. i can add this code manually after to add the dynamic content and it works but it doesn't have the effect when show menu items, then, can you say me how to add this effect? o can you say me when i could find this code in the project?, because i tried to found it in mdb.js but i didn't have look, regards

pdta: is possible wich that code is execute before add the dynamic content, but i need to know where is it for to know what can i do.

Mikołaj Smoleński replied 1 week ago

Try to save dinamic content in the separete html file and the use $( “#slide-out” ).load( “your_file.html” );. If it’s not working try to look for the errors in console. If dynamic content is not working it’s not MDB fault but jQuery restrictions. Regards

Oscar Bejarano Pro User replied 1 week ago

hi Mikolaj, i took the generated html and pasted it directly in the sidenav container and it works, the html doesn´t work when i add it dynamically, you can try to use the html that i provided in the original question and you’ll see that it works, regards

Mikołaj Smoleński replied 1 week ago

Make sure element has proper class and stylesheets are added correctly to Your page

Oscar Bejarano Pro User replied 1 week ago

hi Mikokaj, im not appending a file, i am building the html by code and inserting it inside a div, for example: $(“#sidenav”).append(“”), regards

Mikołaj Smoleński replied 1 week ago

Try to add stylesheet sand scripts to the file which You are appending

Oscar Bejarano Pro User replied 1 week ago

hi again Mikolaj,

well the content is loaded with jquery with append method from a js file in js folder, in fact, the content is loaded in the file where i call css and js files, or the same, index.html, regards