$.cookie is not a function

When I try to load my page that uses jquery, when the following line is hit:

if ($.cookie('compare') != null) 

I get the error $.cookie is not a function. Has anybody seen开发者_开发知识库 this before?

---

That means that the $.cookie plugin isn't being included in the page, at least not being it's getting called. Make sure it's both being included, and is being included before it's getting used. Include it just after jQuery itself to be safe.

Just a tip: Several other plugins rely on the cookie plugin (but don't necessarily check if it exists before calling it), you could be using one.

---

Do you have the jQuery cookie plugin?

---

No but I can show you how to make one very easy like ...

Create a seperate js file, name it what you want, for ease of this, i'll call it jCook.

In your header, after you add jQuery, add your new file:

<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript" src="jCook.js"></script>  <!-- here it is! -->

And below is the EASY code to put in the file:

(function($) {
    if (!$.setCookie) {
        $.extend({
            setCookie: function(c_name, value, exdays) {
                try {
                    if (!c_name) return false;
                    var exdate = new Date();
                    exdate.setDate(exdate.getDate() + exdays);
                    var c_value = escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
                    document.cookie = c_name + "=" + c_value;
                }
                catch(err) {
                    return false;
                };
                return true;
            }
        });
    };
    if (!$.getCookie) {
        $.extend({
            getCookie: function(c_name) {
                try {
                    var i, x, y,
                        ARRcookies = document.cookie.split(";");
                    for (i = 0; i < ARRcookies.length; i++) {
                        x = ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
                        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
                        x = x.replace(/^\s+|\s+$/g,"");
                        if (x == c_name) return unescape(y);
                    };
                }
                catch(err) {
                    return false;
                };
                return false;
            }
        });
    };
})(jQuery);

The try catch and what not just helps to ensure you get a "false" return if you do somthing wrong, but really shouldn't ever be an issue. To use the code is easy...

On your page, where your load code or whatever is just do the following:

$.setCookie("nameOfCookie", "someValue", 30); // where 30 is the number 
// of days to expire, or you could leave blank as:
$.setCookie("nameOfCookie", "someValue")

// And to retrieve your cookie
$.getCookie("nameOfCookie");

See how simple that was!?

And just to resolve, below is a real world example use to save a state of a select drop down menu

$(function(){
        $("select[name=somthing]").change(function(e) {
            $.setCookie("selectThis", $(this).val());
        });
        //  And to use ...
        if ($.getCookie("selectThis")) $("select[name=somthing]").val( $.getCookie("selectThis") ).change();
});

---

Basically there could be various reasons for this problem.

1. You might not have added jquery plugin.
2. Make sure to include jQuery file before the cookie plugin
3. If you already have done above two then try downloading the new version of jquery-cookie plugin that also solved my problem.

---

Try enabling Mod_Sec for your domain, or asking your hosting company to enable it. Hope this helps.

---

The same problem occured in our Drupal 7 installation. It was caused, if I understand correctly, by ModSecurity configuration in cPanel blocking the file. See http://forums.cpanel.net/f5/mod-security-blocking-jquery-cookie-javascript-drupal-installation-191002.html

---

I've been using this code -

if( $.cookie('siteLayout') != undefined ){
   if( $.cookie('siteLayout') == 'compact' ) 
   $(settings.bodyElem).addClass('container');
}

And it works fine. But i was in-need to use another jQuery version in a specific page where version was 1.7.2 but i was actually using 1.10.2 After use multiple jQuery version i got this error -

TypeError: $.cookie is not a function

then i used jQuery.cookie instead of $.cookie and it works. Hope, this will also help ;)

---

For me the issue was fixed after downloading the latest version of jquery.cookie js

---

<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/jquery.cookie.js"></script>

the first plugin must be juqery.js and the second plugin is cookie.js