90

I am trying to set a cookie using jQuery:

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

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

  • I have downloaded the jQuery cookie plugin here.
  • I am linking to jQuery and THEN the cookie plugin.
  • Both jQuery and jQuery.cookie are loading correctly with 200 OKs.

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

Any ideas on what is going on here?

If it helps, I am creating a web application in MVC 4.

Community
  • 1
  • 1
ElliotSchmelliot
  • 7,322
  • 4
  • 41
  • 64
  • 1
    Any exceptions in your browser's console? Maybe your version of jQuery isn't right for your version of jQuery cookie plugin – Ian Aug 02 '13 at 19:18
  • 3
    Are you including jQuery twice? (most likely yes). Otherwise, you're either using $.noConflict(), or you are including another .js file that overrides $. – Kevin B Aug 02 '13 at 19:20
  • Just "$.cookie is not a function". Nothing else. – ElliotSchmelliot Aug 02 '13 at 19:20
  • 1
    What does $.fn.jquery give you both immediately after including jquery.js, and in your code where the error occurs. – Kevin B Aug 02 '13 at 19:21
  • @KevinB Im not using $.noConflict(). Would including jQuery twice cause this problem? $.fn.jQuery is "2.0.3" – ElliotSchmelliot Aug 02 '13 at 19:21
  • 1
    @ElliotSchmelliot Yes, as the second will completely overwrite the first, including all plugins. – Kevin B Aug 02 '13 at 19:22
  • can we see your full ``? See how you're `linking` the files? – SpYk3HH Aug 02 '13 at 19:25
  • @KevinB Hey you were totally right. One of my layout pages had a call that was rendering jQuery as well. Thanks so much! – ElliotSchmelliot Aug 02 '13 at 19:29
  • 4
    If you already found the answer you could answer it yourself. This prevents, that other are working on an answer or even open the question. – surfmuggle Aug 02 '13 at 19:43

7 Answers7

137

Here are all the possible problems/solutions I have come across:

1. Download the cookie plugin

$.cookie is not a standard jQuery function and the plugin needs to be downloaded here. Make sure to include the appropriate <script> tag where necessary (see next).

2. Include jQuery before the cookie plugin

When including the cookie script, make sure to include jQuery FIRST, then the cookie plugin. 

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

3. Don't include jQuery more than once

This was my problem. Make sure you aren't including jQuery more than once. If you are, it is possible that:

  1. jQuery loads correctly.
  2. The cookie plugin loads correctly.
  3. Your second inclusion of jQuery overwrites the first and destroys the cookie plugin.

For anyone using ASP.Net MVC projects, be careful with the default javascript bundle inclusions. My second inclusion of jQuery was within one of my global layout pages under the line @Scripts.Render("~/bundles/jquery").

4. Rename the plugin file to not include ".cookie"

In some rare cases, renaming the file to something that does NOT include ".cookie" has fixed this error, apparently due to web server issues. By default, the downloaded script is titled "jquery.cookie.js" but try renaming it to something like "jquery_cookie.js" as shown above. More details on this problem are here.

ElliotSchmelliot
  • 7,322
  • 4
  • 41
  • 64
  • 14
    I was using a framework, and the problem was with the multiple inclusion of jQuery. Many thanks !!! – jrierab Apr 09 '15 at 11:55
  • It says on github that the plug in was no longer supported so I upgraded the file to the newer version(2.1.0 I think) and it did not work so you have to use the old version that this answer links to. – Erik Grosskurth Mar 09 '16 at 15:30
  • 2
    For me jQuery was added more than once – Ardalan Shahgholi Aug 25 '16 at 20:35
  • 2
    Thank you for the "including jQuery more than once" comment. It resolved an issue 7 years later. – Erik Frantz Mar 27 '20 at 19:29
  • It's still there; I ended up moving my script tag below my footer, as it was not finding it in the head of my Master page for some reason. I also verified no other bundles or script tags loading jQuery more than the one time it's referenced inside the Master head tag. – Tim Jun 03 '22 at 17:07
41

The old version of jQuery Cookie has been deprecated, so if you're getting the error:

$.cookie is not a function

you should upgrade to the new version.

The API for the new version is also different - rather than using

$.cookie("yourCookieName");

you should use

Cookies.get("yourCookieName");
YPCrumble
  • 26,610
  • 23
  • 107
  • 172
  • 3
    I upgrade my jquery to 3.3.1.js. But it doesn't work properly. 'Uncaught ReferenceError: Cookies is not defined' is generated on the same line that I changed. Is there anyone same with me? – JongHyeon Yeo Feb 13 '18 at 01:42
  • @JongHyeon Yeo, I am running 3.3.1, and $.cookie is working for me. Hope you've sorted it out in the intervening four years! – Tim Jun 03 '22 at 17:09
27

add this cookie plugin for jquery. 

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
cabs
  • 710
  • 7
  • 14
  • It worked only when I add you given script after `wp_head()` function in my wordpress theme. – Rishabh Apr 25 '17 at 06:33
  • All I needed was a simple link to a file and this accomplished the job nicely. Didn't need all that npm install. – Dave Aug 23 '20 at 17:10
2

Check that you included the script in header and not in footer of the page. Particularly in WordPress this one didn't work:

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

The last parameter indicates including the script in footer and needed to be changed to false (default). The way it worked:

wp_register_script('cookie', get_template_directory_uri() . '/js/jquery.cookie.js');
Tatyana
  • 101
  • 1
  • 4
2

You should add first jquery.cookie.js then add your js or jQuery where you are using that function.

When browser loads the webpage first it loads this jquery.cookie.js and after then you js or jQuery and now that function is available for use

bibi
  • 3,671
  • 5
  • 34
  • 50
Amit Mishra
  • 50
  • 7
1

I had this problem as well. I found out that having a $(document).ready function that included a $.cookie in a script tag inside body while having cookie js load in the head BELOW jquery as intended resulted in $(document).ready beeing processed before the cookie plugin could finish loading.

I moved the cookie plugin load script in the body before the $(document).ready script and the error disappeared :D

Kostas Tsakalidis
  • 83
  • 1
  • 6
0

Solve jQuery $.cookie is not a function this Problem jquery cdn update in solve this problem 

 <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
Shivendra Kumar Singh
  • 39
  • 3