create sidenav dynamically

Oscar Bejarano asked 9 months 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>

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 commented 9 months 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 commented 9 months ago

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


Oscar Bejarano commented 9 months 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 commented 9 months ago

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


Oscar Bejarano commented 9 months 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 commented 9 months 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 commented 9 months 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 commented 9 months 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.


Please insert min. 20 characters.
Status

Closed

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No