CODEWITHSUNDEEP
javascriptjquerycssgoogle-chromezurb-foundation
FreddieE
FreddieE

Reputation: 3873

"Uncaught TypeError: a.indexOf is not a function" error when opening new foundation project

I've created a new Foundation 5 project through bash, with foundation new my-project. When I open the index.html file in Chrome an Uncaught TypeError: a.indexOf is not a function error is shown in the console, originating in jquery.min.js:4.

I created the project following the steps on the foundation site, but I can't seem to get rid of this error. Foundation and jQuery look like they are included and linked up correctly in the index.html file, and the linked app.js file is including $(document).foundation();

Does anyone know what is causing this error? and what a solution might be?

Console error message screenshot

Upvotes: 375

Views: 474273

Answers (8)

Leandro Bardelli
Leandro Bardelli

Reputation: 11578

It's seems to be funny but no one take consideration of the following.

  1. Discover if you are having a library that requires an old version of jQuery. If you can't discover the version, You can do it commenting and uncommenting every script line until you find it.
  2. Open the library and find the author.
  3. Search in google for an update of the library. 90% you will find it.
  4. Update the reference of your obsolete library that requires and old version of jQuery.

IN ANY CASE NEVER DOWNGRADE YOUR JQUERY VERSION

Upvotes: 0

Harshit Pant
Harshit Pant

Reputation: 1065

I faced this issue too. I was using jquery.poptrox.min.js for image popping and zooming and I received an error which said:

“Uncaught TypeError: a.indexOf is not a function” error.

This is because indexOf was not supported in 3.3.1/jquery.min.js so a simple fix to this is to change it to an old version 2.1.0/jquery.min.js.

This fixed it for me.

Upvotes: 22

Daniel Llano
Daniel Llano

Reputation: 11848

This error might be caused by the jQuery event-aliases like .load(), .unload() or .error() that all are deprecated since jQuery 1.8. Lookup for these aliases in your code and replace them with the .on() method instead. For example, replace the following deprecated excerpt:

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

with the following:

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

Upvotes: 1181

Ntiyiso Rikhotso
Ntiyiso Rikhotso

Reputation: 720

I solved this by installing the correct version of Jquery that my project required using npm

Upvotes: 0

Govarthanan Venunathan
Govarthanan Venunathan

Reputation: 1359

Please add below jQuery Migrate Plugin

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>

Upvotes: 83

Ricky Levi
Ricky Levi

Reputation: 7997

I'm using jQuery 3.3.1 and I received the same error, in my case, the URL was an Object vs a string.

What happened was, that I took URL = window.location - which returned an object. Once I've changed it into window.location.href - it worked w/o the e.indexOf error.

Upvotes: 4

T.Todua
T.Todua

Reputation: 56371

One of the possible reasons is when you load jQuery TWICE ,like:

<script src='..../jquery.js'></script>
....
....
....
....
....
<script src='......./jquery.js'></script>

So, check your source code and remove duplicate jQuery load.

Upvotes: 15

shaune
shaune

Reputation: 1030

This error is often caused by incompatible jQuery versions. I encountered the same error with a foundation 6 repository. My repository was using jQuery 3, but foundation requires an earlier version. I then changed it and it worked.

If you look at the version of jQuery required by the foundation 5 dependencies it states "jquery": "~2.1.0".

Can you confirm that you are loading the correct version of jQuery?

I hope this helps.

Upvotes: 39

Related Questions