Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery .load() failure

Tags:

jquery

I'm trying to run an answer I found at the following link: Asynchronously Load the Contents of a Div

But when I do, I get errors that I don't quite understand.

My code:

$(document).ready(function() {
  $("#first").load(function() {
    $("body").append($("<div></div>").attr({
      id: "second"
    }).text("Second"));
    $("#second").load(function() {
      $("body").append($("<div></div>").attr({
        id: "third"
      }).text("Third"));
    });
  });
});
<html>

<head>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-
3.2.1.min.js"></script>
</head>

<body>
  <div id="#first">First</div>
</body>

</html>

The error I get back from Chrome is extensive. But here's the highlights:

Uncaught TypeError: a.indexOf is not a function
    at r.fn.init.r.fn.load (jquery-3.2.1.min.js:4)
    at HTMLDocument.<anonymous> (temp.html:6)
    at j (jquery-3.2.1.min.js:2)
    at k (jquery-3.2.1.min.js:2)

Any ideas?

like image 563
Non Disclosure Avatar asked Dec 06 '25 09:12

Non Disclosure


1 Answers

This error might be caused by jquery event aliases like .error, .load or .unload. These are deprecated since jQuery 1.8. You need to replace them with .on() to register listeners instead. Example:

$(window).load(function(){
  ...
});

becomes:

$(window).on('load', function(){
 ...
});

So try using with .on()

like image 194
Ankit Agarwal Avatar answered Dec 07 '25 23:12

Ankit Agarwal



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!