CODEWITHSUNDEEP
javascriptjquery
Introgy
Introgy

Reputation: 541

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

Upvotes: 30

Views: 93621

Answers (9)

Nick Craver
Nick Craver

Reputation: 630389

That means that the $.cookie plugin isn't being included in the page, at least not before 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.

Upvotes: 53

sinda
sinda

Reputation: 11

<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

Upvotes: -1

Klaus Byskov Pedersen
Klaus Byskov Pedersen

Reputation: 120937

Do you have the jQuery cookie plugin?

Upvotes: 10

Syed Ehtsham Abbas
Syed Ehtsham Abbas

Reputation: 502

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.

Upvotes: 3

Vani
Vani

Reputation: 1353

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

Upvotes: 1

Hadi
Hadi

Reputation: 2905

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

Upvotes: 0

BlackShift
BlackShift

Reputation: 2406

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

Upvotes: 1

Regan Rajan
Regan Rajan

Reputation: 11

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

Upvotes: 1

SpYk3HH
SpYk3HH

Reputation: 22570

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

Upvotes: 4

Related Questions