CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Loxez
Loxez

Reputation: 31

Multiple javascripts on one page

I'm working on a site that has 20+ pages that get changed every few months. I decided to make a script to load the navbar,nav, and footer as they are on every page.

<!DOCTYPE HTML>
<html lang="en">
<head>
<link href="../css/bootstrap-dropdownhover.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../css/myCss.css">
</head> 
<body>

<navbar></navbar>

<div id="nav"></div>

<div class="content"></div>

<footer></footer>

</body>
<script src="../js/loader.js"></script>
<script src="../js/bootstrap-dropdownhover.min.js"></script>
</html>

Im using loader.js to load in the navbar, nav, and footer.

$(document).ready(function() {
    $("navbar").load("../pageFramework/navbar.html");
});

$(document).ready(function() {
    $("#nav").load("../pageFramework/navpills.html");
});

$(document).ready(function() {
    $("footer").load("../pageFramework/footer.html");
});

This loads all pages perfectly, but when I try to hover my nav the dropdownhover.min.js does not work to show my dropdown menus. When I put the navbar html directly on the page and remove loader.js it works perfectly.

Upvotes: 2

Views: 97

Answers (2)

David J Eddy
David J Eddy

Reputation: 2037

Once your header/nav/footer have been loaded you will need to re-initialize bootstrap; see Bootstrap Select - reinitialize on dynamically added element

Upvotes: 1

highstakes
highstakes

Reputation: 1519

You need to load bootstrap-dropdownhover.min.js in the callback of load(navbar.html). See: https://api.jquery.com/jquery.getscript/

Upvotes: 0

Related Questions