Issues setting cookie with jQuery

Question

I'm trying to write some jQuery that, when the page loads, checks to see if a cookie has been set. If it hasn't been set, a modal opens, and a cookie is set for 6 hours.

It seems as though my cookie is not getting set, and I don't get either of the console.log statements in my if/else statements, whether the cookie is set or not. In the console, when I type $.cookie('email-signup'), I get the error message "Cannot read property 'cookie' of undefined.

I've never really done this before, so any help or advice would be really appreciated!!!

My jQuery is:

jQuery(document).ready(function($) {
   if (!!$.cookie('email-signup')) {
        SetNewsletterCookie(email);
        console.log('loaded');

    }

   function SetNewsletterCookie(email) {
      $('#modalnewslettercontent').html('<iframe frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="100%" height="400" src="'+themePath+'views/newsletter-signup.html"></iframe>');

         var date = new Date();
         var minutes = 180;
         date.setTime(date.getTime() + (minutes * 60 * 1000));
         $.cookie('email-signup', 1, {expires: date, path: '/'});
         console.log('cookie set');

    }   
 });

Answer 1

According To Jquery-Cookie's docs, you'r var statement creats a variable and not a cookie. try again with their examples:

Create session cookie:

$.cookie('name', 'value');

Create expiring cookie, 7 days from then:

$.cookie('name', 'value', { expires: 7 });

Create expiring cookie, valid across entire site:

$.cookie('name', 'value', { expires: 7, path: '/' });

Answer 2

You're missing the value you have to assign to your cookie.

what you have now is var newsletter = $.cookie('email-signup');

and it should be: var newsletter = $.cookie('email-signup', 1);

the "1" is your value.

to set your cookie to expire in 6 hours like your question, you can do something like this:

jQuery(document).ready(function($) {
  var newsletter = $.cookie('email-signup', 1);
  console.log(newsletter);
  if (newsletter == null) {
        SetNewsletterCookie('email-signup', 180);
  }

function SetNewsletterCookie(newsletter, minutes) {
$('#modalnewslettercontent').html('<iframe frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="100%" height="400" src="../../email-signup.html"></iframe>'); 
         var date = new Date();
         var m = minutes;
         date.setTime(date.getTime() + (m * 60 * 1000));
         $.cookie(newsletter, 1, { expires: date });
  } 
});

Answer 3

You've written:

jQuery(document).ready(function($) { ... });

But the function function($) { ... } is called with no arguments. This means $ inside the function definition (which is declared separately from the $ declared outside) is undefined, even if the $ on the outside is defined. (I don't know whether it is.) That function should just be function() { ... }, without the $ argument; if you change that it might fix it. If not, replace all occurrences of $ with jQuery, or else add var $ = jQuery;.