Topic: Sidebar Side navigation links don't work if loaded by ajax

gianlucagiacometti priority asked 5 years ago


I would like to load the template with only the logo and then load each component by ajax so that I can personalise them with the proper language (I'm developing a multilingual website)
The sidenav collapsible accordion does not work if loaded via ajax.


My template is just:

<!--Double navigation-->

<!-- Sidebar navigation -->
<div id="slide-out" class="side-nav sn-bg-4 fixed">
<ul id="sidebar-content" class="custom-scrollbar">
<!-- Logo -->
<div class="logo-wrapper waves-light">
<img src="images/logo.png" class="img-fluid flex-center" alt="MyLogo">
<!--/. Logo -->
<div class="sidenav-bg mask-strong"></div>
<!--/. Sidebar navigation -->

<!-- Navbar -->
<nav id="header-nav" class="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav">
<!-- SideNav slide-out button -->
<div class="float-left">
<a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
<!-- /.Navbar -->

<!--/.Double navigation-->

<!--Main Layout-->
<main id="site-main-content">
<!--Main Layout-->

My japascript is:

$(function() {

  // SideNav Button Initialization
  // SideNav Scrollbar Initialization
  var sideNavScrollbar = document.querySelector('.custom-scrollbar');

   var postdata = {};
  $.post("sidemenu.php", postdata).done(function(response) {


The only possibility to make it work is to reload mdb.js after populating the sitenav with the collapsible accordion with:

$("<script type=\"text/javascript\" src=\"/js/mdb.min.js\"></script>").appendTo("body");

But I get a console warning XMLHttpRequest synchronous deprecated.

I can of course ignore the warning, but I would like to know if there's another more elegant solution

Thank you



Piotr Glejzer staff commented 5 years ago


did you try to use 'async: false'?  



Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: All
  • Browser: Various
  • OS: All
  • Provided sample code: Yes
  • Provided link: No