CODEWITHSUNDEEP
javascriptjqueryangularjswordpresstypeerror
r.konrad
r.konrad

Reputation: 13

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

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

Upvotes: 1

Views: 2154

Answers (6)

nowhere
nowhere

Reputation: 1548

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);"

Upvotes: 1

vishal patel
vishal patel

Reputation: 329

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"); });

Upvotes: 0

Arun
Arun

Reputation: 1185

$ 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.

Upvotes: 0

sandrooco
sandrooco

Reputation: 8776

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

Upvotes: 1

refresh
refresh

Reputation: 1329

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.

Upvotes: 0

Michael Gecht
Michael Gecht

Reputation: 1444

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.

Upvotes: 0

Related Questions