TypeError: $ is not a function at jQuery function

Question

I have a simple jQuery script in a WordPress plugin that is using a jQuery wrapper:

$("#myForm").submit(function(e){

    e.preventDefault();

    if ($('input[name="username"]').val() == "" || $('input[name="password"]').val() == "") 

        $("#NotesArea").html("Please enter both Username and Passnumber");

    else

        $.post($(this).attr("action"), $(this).serialize())

              .done(function(data)              { $("#NotesArea").html(data); })

              .fail(function(jqXHR, textStatus) {alert( "Request failed: " + textStatus );});

});

I am calling this script from within the WordPress Dashboard and i am getting always this error:

Uncaught TypeError: $ is not a function

Alright, I made it like this, no errors but the code doesn't work!

(function($){
$("#myForm").submit(function(e){

    e.preventDefault();

    if ($('input[name="username"]').val() == "" || $('input[name="password"]').val() == "") 

        $("#NotesArea").html("Please enter both Username and Passnumber");

    else

        $.post($(this).attr("action"), $(this).serialize())

              .done(function(data)              { $("#NotesArea").html(data); })

              .fail(function(jqXHR, textStatus) {alert( "Request failed: " + textStatus );});

});
})(jQuery);

it seems like jquery conflicts because of two different version is used. — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Oct 5, 2016 at 20:05

charlietfl · Accepted Answer · 2016-10-05 20:11:43Z

3

Wordpress use noConflict which removes the $ alias

Wrap your code in the following IIFE and you can continue using $ inside it

(function($){
  /* your code*/

})(jQuery);

answered Oct 5, 2016 at 20:11

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

4 Comments

MRAN Over a year ago

I made it like what you have suggested, but it won't work! see y edit plz.

charlietfl Over a year ago

"doesn't work" isn't very informative. Does the submit event get triggered? does that ajax request get made? Need more detail

MRAN Over a year ago

"ReferenceError: jQuery is not defined" this was the error!

charlietfl Over a year ago

Then either jQuery.js isn't loaded or your script is being included before jQuery.js. Are you using proper wordpress wp_enqueue_script() for this?

Àlex Torregrosa · Accepted Answer · 2016-10-05 20:08:42Z

2

jQuery is in compatibility mode, use "jQuery" instead of "$".

https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/

answered Oct 5, 2016 at 20:08

Àlex Torregrosa

338 bronze badges

Comments

Alex Yarygin · Accepted Answer · 2016-10-05 20:10:13Z

1

Make sure you call jquery library BEFORE your script.

edited Oct 5, 2016 at 20:10

answered Oct 5, 2016 at 20:05

Alex Yarygin

1147 bronze badges

1 Comment

Mehrad Over a year ago

'sure' not 'shure'

Collectives™ on Stack Overflow

TypeError: $ is not a function at jQuery function

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related