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
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- 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
Piotr Glejzer staff commented 6 years ago
Hi,
did you try to use 'async: false'?
Best,
Piotr