I'm trying to import an HTML file using jQuery:
$('#section1').load('section1.html');
The problem is that when the code is loaded jQuery doesn't work well. Inside this HTML I have some jQuery UI and some checkbox that if I don't use "load" function work, but if I import it, they are not recognized.
Make sure the file path is correct. If using a relative path, make sure you have the file in the correct location.
My working example:
test.html:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<h1>
Test Header
</h1>
<div id="place_holder"></div>
</body>
<script>
$(document).ready(function() {
$('#place_holder').load("load_me.html");
});
</script>
</html>
load_me.html: Placed in the same location as test.html
<h2>Loaded from another file</h2>
You don't have to do in-line Javascript. You can load an external JavaScript file that does the same thing.
Finally I figured out how to solve this problem. I tried to include the other HTML file using PHP instead of Jquery load function.
I renamed my file with PHP extension and uploaded it on virtual server like MAMP or XAMP).
Then used this sintax to import my code.
<?php include("your_file_path/your_file_name.html"); ?>
I included a big section of a website inside the mainpage and my other HTML file was in the same folder of the HOMEPAGE. I used
<?php include("section6.html"); ?>
After use this method all my Jquery library worked correctly.