245

I am getting following error from jQuery once it has been updated to v3.0.0.

jquery.js:9612 Uncaught TypeError: url.indexOf is not a function

Any Idea why?

William Perron
  • 485
  • 7
  • 16
Kamrul
  • 7,175
  • 3
  • 31
  • 31

5 Answers5

638

Update all your code that calls load function like,

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

To

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

jquery.js:9612 Uncaught TypeError: url.indexOf is not a function

This error message comes from jQuery.fn.load function.

I've come across the same issue on my application. After some digging, I found this statement in jQuery blog,

.load, .unload, and .error, deprecated since jQuery 1.8, are no more. Use .on() to register listeners.

I simply just change how my jQuery objects call the load function like above. And everything works as expected.

choz
  • 17,242
  • 4
  • 53
  • 73
  • 46
    It's crazy they don't have a big deprecated warning on this page in their docs, http://api.jquery.com/load/. – James McMahon Jun 20 '16 at 17:30
  • 3
    I found this the be the exact problem I was having when bootstrapping zurbs foundation into aurelia – samuel.molinski Aug 05 '16 at 07:52
  • 5
    kind of ironic that the only place I actually was still doing this was in error handling code that then broke itself :-/ – Simon_Weaver Dec 12 '16 at 19:54
  • I used it in `document.ready` function and it is working like a charm. – prem30488 Nov 07 '19 at 13:06
  • Not working dear, getting same error. Code is as – Kamlesh Jan 29 '20 at 12:04
  • i have also added code in document.ready but still not working. any suggestion? – Kamlesh Jan 29 '20 at 12:05
37

Better approach may be a polyfill like this 

jQuery.fn.load = function(callback){ $(window).on("load", callback) };

With this you can leave the legacy code untouched. If you use webpack be sure to use script-loader.

Korsmakolnikov
  • 709
  • 7
  • 15
  • 1
    Thanks so much. I still got an error, James suggested you use .trigger this worked. jQuery.fn.load = function (callback) {$(window).trigger("load", callback); }; – rgfx Apr 07 '17 at 18:30
  • Amazing solution when it's caused by third party JS. Another plus is that it doesn't require a downgrade, which will cause vulnerability (in any jquery version below 3!). – Mateusz Jan 25 '19 at 11:11
  • This answer is king – Ntiyiso Rikhotso Jun 26 '19 at 17:09
  • my 2cents: `jQuery.fn.load = function(callback){ jQuery(window).on("load", callback) };`, use `jQuery` insted of `$` if not working (like in many WordPress...) – Diego Betto Dec 11 '20 at 09:39
  • I also had to add a return statement so it supports chaining. `jQuery.fn.load = function(callback){ jQuery(window).on("load", callback); return this; };` – Sven Jul 05 '23 at 14:11
16

Jquery 3.0 has some breaking changes that remove certain methods due to conflicts. Your error is most likely due to one of these changes such as the removal of the .load() event.

Read more in the jQuery Core 3.0 Upgrade Guide

To fix this you either need to rewrite the code to be compatible with Jquery 3.0 or else you can use the JQuery Migrate plugin which restores the deprecated and/or removed APIs and behaviours.

F3CP
  • 730
  • 5
  • 17
5

I came across the same error after updating to the latest version of JQuery. Therefore I updated the jquery file I was working on, as stated in a previous answer, so it said .on("load") instead of .load().

This fix isn't very stable and sometimes it didn't work for me. Therefore to fix this issue you should update your code from:

    .load();

to

    .trigger("load");

I got this fix from the following source: https://github.com/stevenwanderski/bxslider-4/pull/1024

James
  • 71
  • 1
  • 3
0

@choz answer is the correct way. If you have many usages and want to make sure it works everywhere without changes you can add these small migration-snippet:

/* Migration jQuery from 1.8 to 3.x */
jQuery.fn.load = function (callback) {
    var el = $(this);

    el.on('load', callback);

    return el;
};

In this case you got no erros on other nodes e.g. on $image like in @Korsmakolnikov answer!

const $image = $('img.image').load(function() {
  $(this).doSomething();
});

$image.doSomethingElseWithTheImage();
pleinx
  • 616
  • 3
  • 8