CODEWITHSUNDEEP
javascripthtmlcookies
Michael Dugas
Michael Dugas

Reputation: 45

Having Errors with reading cookies via javascript

I am storing a cookie when the user accepts cookies on the page.... Once they do this it will in turn stop one from seeing a popup when they visit.

Although when i call the read cookie script in body onload it does nothing.

The cookie is set as I can see it in my chrome content settings.

the way i am trying to do this is calling one function in an external .js called cookieornot() that calls another function and stores the return as a variable

My cookieornot() code is:

  function cookieornot(){
    var result = readCookie("acceptcookies");
    if (result) {
      document.getElementById('acceptcookies').style.display = 'none';
    } else {
      document.getElementById('acceptcookies').style.display = 'block';
    }
  }

My readcookie() code is

function readCookie(name) {
  var nameEQ = name + "=";
  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,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

In my HTML File i have the external .js file holding both functions references as 

<script src="assets/js/ordersys.js"></script>

My HTML portion is: (DIV ID="acceptCookies" should be hidden if the cookie is set)

<body onload='cookieornot()'> <a href="#" class="scrollToTop w3-btn fa fa-chevron-circle-up fa-2x">
    </a>
    <!-- Modal -->
    <nav class="w3-sidenav w3-white w3-card-8 w3-animate-left w3-center" style="display:none;z-index:4;width:70px"

      id="mySidenav"> </nav>
    <!-- Overlay -->
    <div id="id02" class="w3-modal"> </div>
    <div id="id01" class="w3-modal"> </div>
    <div id="id03" class="w3-modal"> </div>
    <!-- Begin Code Here -->
    <div id="Header"></div>
    <div id="acceptCookies" class="w3-panel w3-blue w3-card-12" style="position:fixed;bottom:0px;right:0px;width:100%;">
      <span onclick="this.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
      <h3>This Site Uses Cookies</h3>
      <p>We use cookies to help improve the function of this site. <a href=cookies.html>Learn More</a></p>
      <button class="w3-btn w3-round-xxlarge" onclick="acceptCookies()">I Accept Cookies</button><br><br>
    </div>

So just to iterate, The cookie is properly set:

Name: acceptcookies Content: true Domain: .XXXXX.XXXX Path: / Send for: Any kind of connection Accessible to script: Yes Created: Tuesday, February 14, 2017 at 5:30:47 PM Expires: Wednesday, February 14, 2018 at 5:30:47 PM

But this code does nothing with hiding the div if the acceptcookies cookie is set, like expected.

Could i maybe switch from body onload to here:

<script type="text/javascript">
        $(document).ready(function() {
        $('#mySidenav').load('assets/static_html/navbar_links.html');
        $('#Header').load('assets/static_html/header_on.html');
        $('#Footer').load('assets/static_html/footer.html');
        $('#id02').load('assets/static_html/email_modal.html');
        $('#id01').load('assets/static_html/phone_modal.html');

        $(window).scroll(function(){
          if ($(this).scrollTop() > 100) {
          $('.scrollToTop').fadeIn();
          } else {
          $('.scrollToTop').fadeOut();
          }
        });
        //Click event to scroll to top
        $('.scrollToTop').click(function(){
          $('html, body').animate({scrollTop : 0},800);
          return false;
        });
      });
    </script>

if so how would i go about doing that?

Upvotes: 0

Views: 108

Answers (2)

Michael Dugas
Michael Dugas

Reputation: 45

I had to remove the cookieornot() function from the external javascript then place it in a tag at the bottom of the body, Now everything looks and works fine. I am not positive why i had to do it this way...

I still call the cookieornot() from but now it works.

Upvotes: 0

Cogwizzle
Cogwizzle

Reputation: 550

Based on the way readCookie is written you could change this line in cookie or not from

if (result === "True") {

to

if(result) {

Because if it doesn't find the cookie then it will return null. The cookie will only ever be created if it is true. Hope this helps.

Part 2 Because you already have an jQuery.ready event we can leverage that to run the function after the entire DOM has been loaded. Below I have added the function call to the javascript segment at the bottom of your post. You will need to remove it from body onload.

$(document).ready(function() {
    $('#mySidenav').load('assets/static_html/navbar_links.html');
    $('#Header').load('assets/static_html/header_on.html');
    $('#Footer').load('assets/static_html/footer.html');
    $('#id02').load('assets/static_html/email_modal.html');
    $('#id01').load('assets/static_html/phone_modal.html');

    $(window).scroll(function(){
      if ($(this).scrollTop() > 100) {
      $('.scrollToTop').fadeIn();
      } else {
      $('.scrollToTop').fadeOut();
      }
    });
    //Click event to scroll to top
    $('.scrollToTop').click(function(){
      $('html, body').animate({scrollTop : 0},800);
      return false;
    });

    cookieornot();  // Function added here.
  });

Upvotes: 1

Related Questions