Hello,

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-->
<header>

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

</header>
<!--/.Double navigation-->

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

My japascript is:

$(function() {

  // SideNav Button Initialization
  $(".button-collapse").sideNav();
  // SideNav Scrollbar Initialization
  var sideNavScrollbar = document.querySelector('.custom-scrollbar');
  Ps.initialize(sideNavScrollbar);

   var postdata = {};
  $.post("sidemenu.php", postdata).done(function(response) {
    $("#"+id).append(response[1]);
  });


});

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

Gianluca