CODEWITHSUNDEEP
jqueryhtmlimport
Daniele Martini
Daniele Martini

Reputation: 143

Import HTML file using jQuery

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.

Upvotes: 1

Views: 11209

Answers (2)

Daniele Martini
Daniele Martini

Reputation: 143

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.

Upvotes: -1

st_443
st_443

Reputation: 51

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.

Upvotes: 2

Related Questions