JQuery $ .cookie is not a function

Question

I am trying to set a cookie using jQuery:

$.cookie("testCookie", "hello"); alert($.cookie("testCookie")); 

But when I load my page, I get the error message "$ .cookie is not a function." Here is what I know:

• I downloaded the jQuery cookie plugin here .
• I am contacting jQuery and THEN cookie plugin.
• Both jQuery and jQuery.cookie load correctly with 200 OK.

I looked at several other answers ( here and here and others), to which most people suggested renaming the cookie.js file. I renamed the jquery.cookeee.js cookie, but the results remain the same.

Any ideas on what's going on here?

If this helps, I am building a web application in MVC 4.

Answer 1

If someone else is facing the $.cookie is not a function problem, here are all the possible problems / solutions that I came across:

• The cookie plugin was not loaded. $.cookie not a standard jQuery feature, and the plugin should be downloaded here . Be sure to include the appropriate <script> , if necessary (see next).
• When you enable the cookie script, be sure to enable jQuery FIRST and then the cookie plugin.

i.e. your head may contain:

 <script src="~/Scripts/jquery-2.0.3.js" type="text/javascript"></script> 

and THEN

 <script src="~/Scripts/jquery_cookie.js" type="text/javascript"></script> 

• In some cases, renaming the file to NOT include “.cookie” fixed this error, apparently due to problems with the web server. By default, the loaded script is named "jquery.cookie.js", but try renaming it to something like "jquery_cookie.js", as shown above. Learn more about this issue here .
• Finally (this was my problem), make sure you don't turn on jQuery more than once. If so, it is possible that 1. jQuery loads correctly 2. The cookie plugin loads correctly 3. Finally, your second inclusion of jQuery overwrites the first and destroys the cookie plugin.

For anyone using ASP.Net MVC projects, be careful with javascript enabled by default; they are sometimes difficult to find. My second inclusion of jQuery was in one of my global layout pages under the @Scripts.Render("~/bundles/jquery") line @Scripts.Render("~/bundles/jquery") . I personally prefer not to pass bundles and just reference javascript as needed.

Greetings and special thanks to Kevin B for helping with this.

Answer 2

The old version of jQuery Cookie is out of date, so if you get an error:

 $.cookie is not a function 

you should upgrade to the new version .

The API for the new version is also different - instead of using

 $.cookie("yourCookieName"); 

you should use

 Cookies.get("yourCookieName"); 

Answer 3

add this plugin for jQuery.

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> 

Answer 4

You must add jquery.cookie.js first, then add js or jQuery where you use this function.

When the browser loads the web page first, it loads this jquery.cookie.js and after that you are js or jQuery, and now this function is available for use

Answer 5

Make sure you are in the header of the script, not the page footer. In particular, in WordPress this did not work:

 wp_register_script('cookie', get_template_directory_uri() . '/js/jquery.cookie.js', array(), false, true); 

The last parameter specifies, including the script footer, and it needs to be replaced with false (default). How it works:

 wp_register_script('cookie', get_template_directory_uri() . '/js/jquery.cookie.js');