Menu
I want to make my code separate so I decided to divide each div to html files. Each HTML file has some jQuery click events. I have 2 files index.html and menu.html.
Problem is that I have to include the jQuery library in both files to make it work.
Is there any way that I can include library one time and have it work on both files? I tried to include the library in the index page only, but then the menu click doesn't work.
I included the menu.html file through an iframe.
<iframe src="left-menu.html"></iframe>
334
In your HTML:
<body>
<header>
<div data-includeHTML="_HeaderPartial.html"></div>
</header>
<main>
<div>
This is the main content, from the index file
</div>
</main>
<footer>
<div data-includeHTML="_FooterPartial.html"></div>
</footer>
<script>
$(document).ready(function () {
$("div[data-includeHTML]").each(function () {
$(this).load($(this).attr("data-includeHTML"));
});
});
</script>
</body>
In a separate file "_HeaderPartial.html":
<div>
<h1>This is the Header from its _Partial file</h1>
</div>
In a separate file "_FooterPartial.html":
<strong>And this is from the footer partial file</strong>
The result:
This is the main content, from the index file
And this is from the footer partial file
34
You can add menu.html into the DOM of index.html with the jQuery load() method. This way the jQuery instance created in index.html would also apply to the content loaded from menu.html.
For example in index.html you can do:
$(document).ready(function() {
$('#some-menu').load('some-local-path/menu.html');
});
Note how $('#some-menu') is just another element in index.html into which we load the contents of menu.html. It's also important to note that because of the same-origin-policy, the AJAX request performed as part of the load() method would only work with files in the same domain, protocol and port (unless you're using CORS).
95
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
