Dynamically loading a html template into an existing dynamically loaded div

Question

I have to dynamically load a html template into index.html. Now I want to load another html template into the previously loaded template code.

In other words: index loaded with dashboard template, dashboard has <div id='sidebar'> which will be loaded with sidebar template

$("body").load("dashboard.html");
$(document).on('click', '#sidebar', function(){
    $("#sidebar).load("sidebar.html");
});

The above code requires a manual click to load the sidebar into the page. I want it to be loaded automatically when the page loads (Both the dashboard and sidebar)

I am using jQuery. Kindly help

Answer 1

To do this, put the second load() call in the callback of the first, so that it's executed after the dashboard.html content has been added to the DOM.

$("body").load("dashboard.html", function() {
  $("#sidebar").load("sidebar.html");
});