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


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

gianlucagiacometti pro premium priority asked 6 years ago

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

 


Piotr Glejzer staff commented 6 years ago

Hi,

did you try to use 'async: false'?  

Best,

Piotr


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Open

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