jQuery .load() not loading HTML

Question

I'm trying to make a script that imports my site's header into each page. I have already seen these pages:

I followed these sites, and I still get this error in the console:

jQuery.Deferred exception: Object doesn't support property or method 'load' 
TypeError: Object doesn't support property or method 'load'
   at Anonymous function (http://localhost/header-footer.js:4:5)
   at l (https://code.jquery.com/jquery-3.3.1.slim.min.js:2:29559)
   at Anonymous function (https://code.jquery.com/jquery-3.3.1.slim.min.js:2:29869) undefined

My index.html has the following in the body section:

<div id="header"></div>
<script src="..." integrity="..." crossorigin="anonymous"></script> <!--jQuery-->
<script src="/header-footer.js"></script> <!--Shown below-->

The header-footer.js file includes:

$(document).ready(function () {
    var header = $("#header");
    header.addClass("container-fluid clearfix"); // Bootstrap classes (unrelated as far as I know)
    header.load("/header.html");
});

I would just like to be able to import my header.html file into my index.html file.

I don't think this is related to the error, but here are the contents of my header.html file:

<ul class="list-inline">
    <li>
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownButton">
                <a class="dropdown-item" href="...">Another page</a>
            </div>
        </div>
    </li>
    <li><a class="btn btn-primary" href="/" role="button">Home</a></li>
    <li class="lead" style="float: left;">Website Name</li>
</ul>
<hr>

What silly mistake have I made? Thank you!

You're using jquery slim. Is that correct? Try to use code.jquery.com/jquery-3.2.1.min.js instead of slim version. — Renan Araújo
– Renan Araújo, Commented Nov 3, 2018 at 0:10
Glad to hear @RenanAraújo helped. You can also see here for other differences between jQuery and jQuery slim: stackoverflow.com/questions/35424053 — user1189882
– user1189882, Commented Nov 3, 2018 at 0:13

Renan Araújo · Accepted Answer · 2018-11-03 00:14:33Z

2

You're using jquery slim.

Use code.jquery.com/jquery-3.2.1.min.js instead of slim version to use load method.

answered Nov 3, 2018 at 0:14

Renan Araújo

3,65911 gold badges42 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery .load() not loading HTML

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related