Reputation: 247
I'm using 3 html, 1 with the header, 1 with footer, and another with the base of everything. I am loading the header and footer with the following code
jQuery(document).ready(function ($) {
$('#header-load').load('/app/templates/header.html', function () {
console.log('header loaded')
});
$('#footer-load').load('/app/templates/footer.html', function () {
console.log('footer loaded')
});
$('.dropdown').on('show.bs.dropdown', function (e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
});
$('.dropdown').on('hide.bs.dropdown', function (e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(200);
});
})
In the base html, this is the following
<!DOCTYPE html>
<html class="no-focus" lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" id="css-main" href="/public/css/app.css">
<!-- END Stylesheets -->
</head>
<body>
<!-- Page Container -->
<div id="page-container" class="">
<!-- Header -->
<div id="header-load"></div>
<!-- END Header -->
<!-- Main Container -->
<main id="main-container">
</main>
<!-- END Main Container -->
<!-- Footer -->
<div id="footer-load"></div>
<!-- END Footer -->
</div>
<!-- END Page Container -->
<!-- JS-->
<script src="/public/library/jquery/dist/jquery.min.js"></script>
<script src="/public/library/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/public/js/app.js"></script>
</body>
</html>
I have a function in app.js to load into the header.html, but it does not work..
Load the header and footer but the other function does not
Upvotes: 0
Views: 268
Reputation: 621
.load
work async like ajax
, you must wait for request complete then find elements and define events.
jQuery(document).ready(function ($) {
$('#header-load').load('/app/templates/header.html', function () {
console.log('header loaded')
$('#footer-load').load('/app/templates/footer.html', function () {
console.log('footer loaded')
$('.dropdown').on('show.bs.dropdown', function (e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
});
$('.dropdown').on('hide.bs.dropdown', function (e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(200);
});
});
})
});
Upvotes: 1