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

Solution 1:

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.

Solution 2:

Do you have the jQuery cookie plugin?

Solution 3:

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

Solution 4:

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.