"TypeError: $ is not a function" after loading some scripts into wordpress

Question

We start to provide a HTML-Snippet like Google or Facebook does for its advertising things or the integration for the Facebook like button. It contains a business application.

Our HTML-Snippet loads a script and contains a few more informations:

<div id="ncc" data-hash="" ng-jq>
<div id="wiz" ng-controller="WizardCtrl"></div>
<script src="{{URLTOSCRIPT}}/load.js"></script>
</div>

The script checks if a jQuery is installed and loads all related things into the DOM and at the ends inits an angular-Application.

All this works fine on pages that havn't enabled jQuery.noConflicts-Mode.

After the latest Wordpress-Updates we got an ERROR

"TypeError: $ is not a function"

We tried to get rid of it using some workaroungs like

jQuery(document).ready(function($){

    $(function () {
    //code to execute
});

OR

jQuery(document).ready(function(){
    var j = jQuery.noConflicts();
    j(function () {
    //code to execute
});

and changed also all references in the angular-part. But nothing working really well.

Any suggestions?

We are using AngularJs v1.4.7, jQuery v1.11.3 (started to migrate to 2.1.4), the

nowhere · Accepted Answer · 2015-10-08 06:46:05Z

1

Sometimes when more versions of jQuery are loaded or if it conflicts with another library you can get that error:

have you tried to replace in all of your code the $ symbol with the word "jQuery"?

So your example would become:

jQuery(document).ready(function(){

    jQuery(function () {
    //code to execute
});

Note: I don't think that in this case passing "$" as a parameter is needed anymore ;)

EDIT: there is also another possibility:

you say that you're using the $ sign (i guess to avoid the usual conflicts in wordpress) in this way:

jQuery(document).ready(function($){

    $(function () {
    //code to execute
});

But this will make the $ symbol available only inside the ready() function.

Did you check if you have somewhere code using the $ where you actually aren't allowed to (or in other words if you have any piece of your js code where $ isn't mapped as "jQuery")?

EDIT 2: The only working solution in the end was:

(function($,undefined){ 
   $(document).ready(function(){ 
     //code to execute 
   }); 
})(jQuery);"

edited Oct 8, 2015 at 6:46

answered Oct 7, 2015 at 11:42

nowhere

1,5481 gold badge12 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

r.konrad Over a year ago

your right, this was wrong in my example, stupid copy and paste things. i aready tried this, as well.

nowhere Over a year ago

@r.konrad Are you 100% sure that there isn't some other jquery file loaded on the same page? It happened to me once but I wasn't able to find it until i checked every single js file in firebug.

r.konrad Over a year ago

Near to 99.9 %. The crazy thing is, that this "workround" works an two of five pages and stops working after the first two steps. I personally have the feeling that it could also be, that a plugin-js loaded later by reference at bottom of body or in footer could cause this errors.

nowhere Over a year ago

@r.konrad well if the page works until something makes it stop it totally sounds like something conflicting gets loaded at a later stage... would be useful to have a working link to try to give it a look ;)

r.konrad Over a year ago

Yeah we checked all this, but we found a working solution. :-) zenverse.net/… at this site comment from "Nayan Paul" Solution was: "(function($,undefined){ $(document).ready(function(){ //code to execute }); })(jQuery);"

|

sandrooco · Accepted Answer · 2015-10-07 11:38:50Z

1

Make sure jQuery is loaded before any other script that uses certain jQuery functions.

answered Oct 7, 2015 at 11:38

sandrooco

8,88611 gold badges56 silver badges101 bronze badges

3 Comments

r.konrad Over a year ago

jQuery is always loaded before all other scripts

sandrooco Over a year ago

Ok i think there's a problem with the migration to jQuery 2.1.4. Is it possible that something's calling older versions of jQuery?

r.konrad Over a year ago

problem also exists with not migrated to newer version

Michael Gecht · Accepted Answer · 2015-10-07 11:36:37Z

0

Normally those errors arise, when the jQuery library wasn't loaded yet. Make sure that a $()-call is called after jquery was loaded, which normally happens at the end of your file to speed up loading times.

Therefore putting

<script src="{{URLTOSCRIPT}}/load.js"></script>

to the end of the body-tag should help.

answered Oct 7, 2015 at 11:36

Michael Gecht

1,4441 gold badge18 silver badges26 bronze badges

1 Comment

r.konrad Over a year ago

this is not an option, we need it into the snippet

refresh · Accepted Answer · 2015-10-07 11:37:11Z

0

Usually when you get this error: "TypeError: $ is not a function" it means, you a missing a JQuery library or they are not placed in the correct order. Ordering JQuery libraries is important.

answered Oct 7, 2015 at 11:37

refresh

1,3292 gold badges27 silver badges75 bronze badges

1 Comment

r.konrad Over a year ago

on external sites where our snippet is pleaced, we will not have any influence to the ordering

nowhere · Accepted Answer · 2015-10-07 12:47:20Z

0

$ is not a function. It means that there is a function named $, but it does not have a plugin/widget named selectable. So, something has stolen your $ or there is another library added after it, or it was never loaded.

edited Oct 7, 2015 at 12:47

nowhere

1,5481 gold badge12 silver badges31 bronze badges

answered Oct 7, 2015 at 11:54

Arun

1,1839 silver badges15 bronze badges

Comments

vishal patel · Accepted Answer · 2015-10-07 13:15:06Z

0

Your script file is not loading properly or script file is not available. open browser inspect element and put this code jQuery().jquery. it's display which jquery version is use. this is for testing
jQuery(document).ready(function() {

alert("test"); });

answered Oct 7, 2015 at 13:15

vishal patel

3291 silver badge12 bronze badges

Collectives™ on Stack Overflow

"TypeError: $ is not a function" after loading some scripts into wordpress

6 Answers 6

7 Comments

3 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

7 Comments

3 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related