Jquery Load function for BS4 Sidebar Nav

html
jquery

#1

I have formed a BS4 sidebar navigation on left side and I have a Content Div on right side.

<nav id="sidebar">
<ul class="list-unstyled components">
<li>
  <a href="dashboard.html">
<i class="fas fa-cubes"></i>
  Dashboard</a></li>
  <li>
    <a href="business.html">
      <i class="fas fa-briefcase"></i>
      About</a></li>
    <a href="portfolio.html">
      <i class="fas fa-portfolio"></i>
      Portfolio</a></li>
    <a href="services.html">
      <i class="fas fa-services"></i>
      Services</a></li>
  </ul>
</nav>
<div id="content"></div>
$(document).ready(function(){
   $('#sidebar ul li a').on('click',function(event){
    event.preventDefault();
   $('#content').empty();
   $('#content').load($(this).attr('href'));
       return false;
   });
});

Now, all these ‘href’ files like portfolio[dot]html, dashboard[dot]html are dynamic pages, which are again using different javascript libraries like Google Chart API, Datatables etc. When I click on these, I want to load the respective href html page in ‘Content’ Div. I am using following Jquery code for the same.

The problem is that, the pages are loading good for the first time click, but afterwards, only HTML static contents are visible, whereas Javascript content of that respective pages are not being loaded after second click onwards.
I had read somewhere that I need to avoid reload of Javascripts libraries multiple times, so I removed the libraries from href pages and only included them into Index page. Still the same problem persist. All work fine for every ‘li’ on first click. Second click onwards, its not loading contents from href pages.
Can anyone help me on this please. I am stuck since last 2-3 weeks.
PS: due to Sitepoint restriction I used [dot]


#2

Hi @mohammedsaq, that’s impossible to tell without being able to inspect the your page I’m afraid. Can you provide a link or the (minimum) code required to reproduce the problem? My guess would be that you need to reinitialise certain parts of your application though, such as the data tables for the loaded content.

That is true, however you might consider only loading them on demand anyway; otherwise you’ll be loading a lot of JS that isn’t required from the start (and maybe never will) and unnecessarily slow down the page load.


#4

But you are loading all those libraries again in the global.html… and not only that, but you’re actually loading jQuery twice in that very page, once before and once after the extensions. So the 2nd time (3rd time overall) you’ll reload jQuery again and lose all previously installed extensions.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sheetrock/1.1.4/dist/sheetrock.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

If you open the console of your browser dev tools you can see the errors that $.sheetrock() etc. is not a function.


#5

Thanks alot for having a look into my problem and giving your valuable suggestion.
I read about it and after reading that I removed all the libraries from btst.html page still having same problem as that of global.html.
Pardon me if questions are silly, all these I learned from books/internet, just started out coding on my own a month back. Dont know much.
What should I do for this sheetrock problem?


#6

Well don’t include the libraries in any dynamically loaded page – just in the hosting dashboard.html. But you should tidy that page too – it looks like you’re loading several different versions of jQuery here:

<script src="//use.fontawesome.com/releases/v5.0.13/js/solid.js"></script>
<script src="//use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"></script>
<!-- jQuery #1 -->
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery #2 -->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<!-- jQuery #3 -->
<script src="js/jquery-bundle.js"></script>
<script src="js/jsapi.js"></script>
<script src="js/framebox.js"></script>
<script type="text/javascript" src="js/loader.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-sheetrock/1.1.4/dist/sheetrock.min.js"></script>

As for sheetrock, that was just an example really… you’re getting a couple of errors like this, e.g. for DataTable and myTimer as well. To solve this, make sure you’re loading the libraries in the correct order; a jQuery extension depends on jQuery, so jQuery has to be present first.