30

This example

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<div id="test"></div>
<script>
$(document).ready(() => {
  $('#test').load('doesntmatter');
});
</script>

seemed to me like it is identical to the examples for the ajax load function. As the code snippet can tell you, it actually errors out with

Uncaught TypeError: $(...).load is not a function

What am I doing wrong?

Guillaume CR
  • 2,878
  • 1
  • 15
  • 30

8 Answers8

73

https://code.jquery.com/jquery-3.2.1.slim.min.js is the slim edition of jquery, which does not include ajax. slim is the default version included in an Express server. Use the full version of jquery at https://code.jquery.com/jquery-3.2.1.min.js

Guillaume CR
  • 2,878
  • 1
  • 15
  • 30
4

Here's a screenshot of the jquery downloads from the jquery download page (https://jquery.com/download/)
It is easy NOT to notice this line.
Since many people are using jquery ajax, maybe they should rename the file as jquery-slim-no-ajax.js

enter image description here

Dexter
  • 3,590
  • 1
  • 23
  • 24
2

First of all, make sure you don't include jquery library after your js code! Especially be careful if you use bootstrap!

I had the problem - I didn't see the part of bootstrap code in the footer.php, which had another jquery library - which caused the problem.

Shreyder
  • 21
  • 4
1

I have found this script link to post in your HTML that includes the ajax library:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">

Try it. The load function works.

Inês Barata Feio Borges
  • 131
  • 1
  • 13
0

JQuery format is wrong:

$(document).ready(function() {
        $('#test').load('doesntmatter');
    });

then add a page name in your directory or such into the load parameters

  • Also make sure your script is the newest functional version
clearshot66
  • 2,205
  • 1
  • 6
  • 16
  • Remove .load and add `alert('test');` does THAT work? If not your script files aren't loading for JS, but => isn't valid syntax so that's also an error. – clearshot66 Sep 01 '17 at 15:56
  • 1
    Yes, using 'alert' instead works. => is [valid javascript syntax](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions). – Guillaume CR Sep 01 '17 at 15:57
  • Regardless, changing it to your syntax gives the same error. – Guillaume CR Sep 01 '17 at 15:59
  • $ undefined only shows when your script src isn't importing or you messed up a function. Use this one `` – clearshot66 Sep 01 '17 at 16:01
  • That worked. It seems code.jquery.com is distributing a broken version of jquery. If you want to modify your answer to your last comment instead, I will mark it as answer. – Guillaume CR Sep 01 '17 at 16:05
0

Please try this

$(document).ready(function(){
    $("button").click(function(){
       $("#div1").load("demo_test.txt #p1"); 
    });
});
Manoher Kumar
  • 229
  • 3
  • 10
0

Try to not use JQuery for that :

This will ensure that JQuery is loaded before using it.

window.addEventListener("load", function(event) {
  $('#preloader').delay(400).fadeOut(500);
  // Do what you want, the window is entirely loaded and ready to use.
});

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets images. This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded, without waiting for resources finish loading.

Mozilla documentation: load event

Edit : According to the question to not confusing window.loaded and jquery.load

First, change jquery.slim to jquery like previous response

Second, use native event handler for best practice (in my opinion) with modern browsers.

// To be sure $ is defined
// Window loaded event
window.addEventListener("load", function(event) {

  // Now $ or JQuery is completly available
  // Now using JQuery.load() should be defined
  $('#test').load('doesntmatter');

  // Do what you want, the window is entirely loaded and ready to use.
});
Shim-Sao
  • 1,578
  • 2
  • 13
  • 19
  • http://api.jquery.com/load/ is an AJAX function in jQuery > 3. This question is not related to load event. – illnr May 05 '19 at 22:37
  • And my response still the same because I had the same issue last week (never before) and it's the only simple and native solution that is solving my problem. 2 browsers, same issue _function ($ what you want) is not a function_ and I have try all you can do. `ready` is when the document is ready not the window. In JQuery : `$( window ).on( "load"...` but what do you do if $ is not defined !? So one case $ is not defined, other case function is not defined. In any case I have test (header, footer...), for me the window have to check that jquery is properly loaded before use. – Shim-Sao May 06 '19 at 08:28
  • _Note: I have change slim, etc, etc and test all solutions during 2 hours before posting that (I like to know why)._ I know there is something wrong somewhere in my page, I think it's Analytics and new privacy rules or something like that. Maybe that's can help someone to not loosing time like have done. – Shim-Sao May 06 '19 at 08:28
  • @IBaff, I understand your response, your right it's not the same things :) Thank you to precise this :) – Shim-Sao May 06 '19 at 08:44
0

here is good advice, I hade the same issue with jquery .load function and other functions not loading, so ensure you use the same jquery path in every page,(the same version) and it will work perfectly fine.

Elvis Esam
  • 1
  • 1