create sidenav dynamically

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: create sidenav dynamically

Oscar Bejarano pro asked 7 years ago

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>

Mikołaj Smoleński staff answered 7 years 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 commented 7 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, regards

Mikołaj Smoleński staff commented 7 years ago

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

Oscar Bejarano pro commented 7 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(""), regards

Mikołaj Smoleński staff commented 7 years ago

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

Oscar Bejarano pro commented 7 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, regards

Mikołaj Smoleński staff commented 7 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. Regards

Oscar Bejarano pro commented 7 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 7 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

FREE CONSULTATION

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

Closed

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
Oscar Bejarano
Pro User
22Support score
11Questions 12Answers
0Snippets likes 0Snippets