Topic: create sidenav dynamically
Oscar Bejarano pro asked 6 years ago
<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>
Mikołaj Smoleński staff answered 6 years ago
Oscar Bejarano pro commented 6 years 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, regardsMikołaj Smoleński staff commented 6 years ago
Try to add stylesheet sand scripts to the file which You are appendingOscar Bejarano pro commented 6 years 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(""), regardsMikołaj Smoleński staff commented 6 years ago
Make sure element has proper class and stylesheets are added correctly to Your pageOscar Bejarano pro commented 6 years 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, regardsMikołaj Smoleński staff commented 6 years 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. RegardsOscar Bejarano pro commented 6 years 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.Oscar Bejarano pro commented 6 years 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.RegalarTech pro commented 6 years ago
Oscar Bejarano , thanks for your update dynamic content is the most important thing in today js , MDB must have good documentation, examples for the same .
Mikołaj Smoleński staff commented 6 years ago
Thanks for Your feedback, RegalarTech
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No