jQuery .load is not a function

Question

I am using jQuery 3.2.1 and this code

// /js/main.js

$(function () {

  var targetId = 'about';

  var container = $('#pages').find('.active').removeClass('active').end()
                             .find('#' + targetId).addClass('active');

  console.log(container, container.load);

  if (!container.data('loaded')) {
    container.load('/pages/' + targetId + '.html');
  }

});

produce this error

Uncaught TypeError: container.load is not a function

The output for container and container.load is

[div#about.tab-pane.active, prevObject: r.fn.init(1)] undefined

I don't understand why I get this error.

Edit

I have no idea why people want the HTML, but here is the relevant part of it

<!DOCTYPE html>
<html lang="en">
  <head>

  </head>
  <body>
    <div class="container">

      <!-- Tab panes -->
      <div id="pages" class="tab-content">
        <div role="tabpanel" class="tab-pane default" id="about"></div>
      </div>

    </div><!-- /.container -->

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
    <script src="/js/main.js"></script>
  </body>
</html>

see what console.log(container) returns , seems there is no elemnt with `'#' + targetId` — Bourbia Brahim, Jun 26 '17 at 16:34
@bRIMOs That shouldn't make a difference. It should just be an empty collection, but still have all the jQuery methods. — Barmar, Jun 26 '17 at 16:44
Strange that it doesn't get an error on `container.data()`. If it's not a jQuery object it shouldn't have either method. — Barmar, Jun 26 '17 at 16:51
I also encountered some error similar to this before. It turned out my import of jQuery file is in a later order of my script, so when executing my script, jQuery has not yet been imported. — Michael Tong, Jun 26 '17 at 18:15
@MichaelTong except this is not the case, here. 1) I import jQuery in the BODY section, and my custom script after. 2) the code I pasted above is inside `$(function () { ... code pasted here ... });`. — Yanick Rochon, Jun 26 '17 at 23:21
@styfle I'm not sure what posting the relevant HTML would produce. As others mentioned, executing `$('#whatever').load(...)` should work regardless if the selector returns anything or not. — Yanick Rochon, Jun 26 '17 at 23:23
There's no AJAX in jQuery slim. Use the full version. Voting to close — Phil, Jun 27 '17 at 00:17

jQuery .load is not a function

Edit

0 Answers0