Multiple javascripts on one page

Question

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.

The problem is with `bootstrap-dropdownhover.min.js`. It sounds like it only works with static elements, not dynamically-added elements. — Barmar, Mar 03 '16 at 22:18
@cale_b That's not much help if the event binding is in a third-party library. — Barmar, Mar 03 '16 at 22:19
You should really look at doing this server side via the use of includes. Using this method means you're effectively quadrupling the number of requests made to load the page (CSS and images excepted) — Rory McCrossan, Mar 03 '16 at 22:23
@RoryMcCrossan that sounds like a good idea. Im new to JS so i thought this would work, but ill look up includes. — Loxez, Mar 03 '16 at 22:33
Is your code here just an example? because I don't see the need to have 3 `$(document).ready(...)` statements. Can you just combine these into 1? Then it will be easier to use the callback approach listed in the answer below — jasonscript, Mar 04 '16 at 00:08

score 1 · Answer 1 · edited May 23 '17 at 12:07

1

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

edited May 23 '17 at 12:07

Community

1
1

answered Mar 03 '16 at 23:43

David J Eddy

1,999
1
19
37

score 0 · Answer 2 · answered Mar 03 '16 at 23:39

0

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

answered Mar 03 '16 at 23:39

highstakes

1,499
9
14

Multiple javascripts on one page

2 Answers2