Streaming live at 10am (PST)

Debugging JS Custom Code

#1

Hello Everyone. I’m trying to create this code for a specific behavior in this website that I’ve been working on and I managed to get to this final JavaScript code:

"<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>


//cookie setting part

$(document).ready(function(){
  $("#xcloser").click(function(){
    $("#uxbanner").hide();
    var d = new Date();
  d.setTime(d.getTime() + (14 * 24 * 60 * 60 * 1000));
  var expires = "expires="+d.toUTCString();
  document.cookie = "BannerIsHidden=true;" + expires + ";path=/"
  });
});

//get cookie function

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

//check cookies

function checkCookie() {
  var bclosed = getCookie("BannerIsHidden");
  if (bclosed == "true") {
    $("#uxbanner").hide();
  } 
}

</script>

The behavior onClick is working perfectly. Whenever I click the button, it closes the banner and sets a cookie in the browser saying (Bannerishidden=true). However, I’m not able to get that cookie when changing pages. The banner was supposed to stay hidden for 14 days, but it reappears whenever I reload/change pages.

@webdev (Can you help me please?)

#2

I may get a chance to look at this later today.

In the mean time, make sure you are not loading JQuery since it already is loaded by webflow. Then test again.

Also you need to share a published link to the site for debugging in a browser.

1 Like
#3

Will do! If you don’t mind, I’ll send you the link for the website privately. It’s probably something wrong with the code now calling the right function, because I’m not getting any errors from the Console.

#4

Hi @Jeandcc,

Maybe you’d like to check @vincent cookie script he used to set up a cookie on page load with jQuery. I just modified one line so that the cookie is set on button click instead of page load. It works like a charm for me. Hopefully you might find something useful !

Vincent’s cookie project:

The modified code:

<!-- cookie library-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js'></script>

$(document).ready(function() {
  // if no cookie found...
  if (!$.cookie('alert')) {
    // ...display popup-cookie
    $('.popup-cookie').css('display', 'flex');
    // create a new date variable
    var date = new Date();
    // set date to be equal to 6 months from current date time
    date.setTime(date.getTime() + 6 * 4 * 7 * 24 * 60 * 60 * 1000);
    // create cookie on click to expire on newly defined date
    $('#agree').click(function() {
      $.cookie('alert', true, { expires: date });
    });
  }
});

… and here would be the way I structured the html in webflow more or less:

<div class='popup-cookie'>
  <p>we use cookies</p>
  <div id='agree'>
    <p>i agree</p>
  </div>
</div>
1 Like
#5

Thank you so much Anthony! I’ve seen this project a long time ago. Thanks for reminding me of it.

I finally got it working. It took me some time experimenting a lot of things and figuring out what was the problem, but I finally got it right.

If you wanna check , here’s the final code:

<script>




$(document).ready(function(){
    
    //cookie setting part
    
    
  $("#xcloser").click(function(){
    $("#uxbanner").hide();
    var d = new Date();
  d.setTime(d.getTime() + (14 * 24 * 60 * 60 * 1000));
  var expires = "expires="+d.toUTCString();
  document.cookie = "BannerIsHidden=true;" + expires + ";path=/"
  });

    //get cookie function

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
        }
     }
    return "false";
    }

    //check cookies


	var isClosed = getCookie("BannerIsHidden");
	if (isClosed == "true") {
  	$( "#uxbanner" ).hide();
	}

    
});
//other codes

</script>
1 Like
#6

awesome, well done !
Thanks for sharing the final code snipet, really interesting !

1 Like
#7

His code is definitely simpler huh?

But as I am pretty new to JS, I rather do things using the longer way, so it allows me to learn much more than going through shortcuts. Dealing with the problems that I was having can be very fruitful and useful for those who are learning something. We definitely learn through our mistakes.

Thank you all for all the help. I really appreciate it.

1 Like
#8

Well actually no :relaxed:
If you check the script src I mentioned, the script seems to be actually a bit longer to what you wrote :slight_smile:

src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"

It is indeed a very good thing to do it the “long way”, I’ve learnt a lot that way too !

1 Like
#9

Got it. I’ve used jQuery for a couple small parts over the code, but I understand what you mean. :webflow_heart:

1 Like