0

I am a starter on jquery. and I encountered this problem today. really hope someone can help.

$('#lecture').on('click', function() {
    $("#screen").load("lecture_page.html");
});

error : course_page.js:7 Uncaught TypeError: $(...).load is not a function

however,

$("#screen").load("lecture_page.html");

this line works by itself.

I already spent couple hours on this by searching through stackoverflow. I tried couple approaches such as: checked my version is not "slim", tried .on("load") instead of .load()...

forgot to mention:

$('#lecture').on('click', function() {
    $("#screen").html("lecture_page.html");
});

if I use the .html() method instead of .load(), it will function correctly and display the text "lecture_page.html" at the correct position.

solved. The reason ends up to be the global sidebar that I am using do have a slim version included in it. Thank you guys for the fast responses. This is my first question on stackoverflow. The experience was very good! 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  //alert('course page js connected');
$(function() {
    $("#sidebar").load("sidebar.html");
});

$('#lecture').on('click', function() {
    $("#screen").load("lecture_page.html");
});
//error : course_page.js:7 Uncaught TypeError: $(...).load is not a function

//$("#screen").load("lecture_page.html"); //this line works fine, however the above "load" cannot be recognized


//-------------------------------------------------------------------
//below is everything I have tried 

    // $("#lecture").click(function(e){
    //     //e.preventDefault();
    //     console.log("clicked");
    //     $("#screen").load("lecture_page.html");
    // });

//$("#screen").load("lecture_page.html");

// $(document).on('click','#lecture',function(e){
//     //e.preventDefault();
//     console.log("clicked");
//     $("#screen").load("lecture_page.html");
// });
</script>
Ding33
  • 19
  • 3
  • 1
    you tried wrap your code into $(document),ready(function() { }); ? – daremachine Dec 03 '18 at 03:05
  • According to your comments, the exact same line of code, just outside of the event handler, works - it may not work within the event handler context. – Jack Bashford Dec 03 '18 at 03:05
  • 2
    Are you loading 2 versions of jQuery.js in page? – charlietfl Dec 03 '18 at 03:08
  • can you show us the html structure? – Kiranramchandran Dec 03 '18 at 04:48
  • @daremachine yes, they are in different html
    , is this what causing problem?
     – Ding33 Dec 03 '18 at 04:48
  • @daremachine I tried the $(document),ready(function() { }); approach. It doesn't help – Ding33 Dec 03 '18 at 04:50
  • @JackBashford what you said is the problem. – Ding33 Dec 03 '18 at 04:51
  • @charlietfl only one. – Ding33 Dec 03 '18 at 04:53
  • Then perhaps you are using `load()` elsewhere also and loading a slim version of jQuery from there? There really isn't a logical reason for your problem without `$.fn.load` getting wiped out somehow – charlietfl Dec 03 '18 at 04:54
  • 1) Open your page in your browser. 2) Press Ctrl+U (or right-click -> _View page source_). 3) Hit Ctrl+F. 4) Type _"jquery"_. I can almost guarantee you'll find at least two and one of them will probably be **slim**. As a final effort, use your browser's _Sources_ developer console to see what scripts are included – Phil Dec 03 '18 at 05:12
  • @charlietfl solved, you are right. the global sidebar I am using does has a slim version : ) – Ding33 Dec 03 '18 at 05:19
  • @Phil Thank you, problem solved. the problem is the global sidebar I am using do have the slim version – Ding33 Dec 03 '18 at 05:21
  • @Ding33 - instead of adding the answer as an edit inside your question, you should instead *answer your own question* by posting an answer below, which is a perfectly acceptable thing to do here on SO. – But those new buttons though.. Dec 03 '18 at 05:28
  • @billynoah Or just vote to close as [one](https://stackoverflow.com/q/46003790/283366) of the [many](https://stackoverflow.com/q/50083822/283366) duplicates – Phil Dec 03 '18 at 05:30
  • @billynoah Good to know. will do it right now. – Ding33 Dec 03 '18 at 05:36

1 Answers1

0

I ended up solving my own problem. thanks for the fast responses and help, everyone.

The reason ends up to be the global "sidebar.html" that I am using does have a jquery slim version included in it. After deleting it, everything worked.

Ding33
  • 19
  • 3