onClick doesn't work the first time correctly

Question

Helloy folks,

Intro

I have to create a website with a navigation point that has an anchor-href, which - no matter where - redirects me towards the index page and down to the anchor. I am trying to solve this problem via javascript.

My Problem:

I wrote a javascript, that creates a cookie if you click on the menu point 'philosophy' and redirects the user towards the index page (FYI the anchor point is on the index page). The problem is, that something seems to go wrong with the cookies. If I am not on the index page and click on the 'philosophy' link in the navbar it redirects me towards the index page but doesn't scroll down to the anchor. If I am on the index page and click twice on the philosophy menu point the code executes properly. It is hard to understand.

The Code

$('.menucategory-4').on('click', function onClick() {
  /* Set-Up Expire-Date for Cookie */
  var now = new Date();
  var time = now.getTime();
  time += 1000 * 6000 //expire after 100 Minute
  now.setTime(time);

  /* Creates Cookie onClick 'Philosophie' and sets Expiredate */
  storage = document.cookie = 'progress=philosophie;' +
    'expires=Thu, 01 Jan 2900 00:00:00 GMT';

  console.log(location);
  console.log(document.cookie);

});



/* On Load check if Cookie exists */
$.subscribe('plugin/swEmotionLoader/onLoadEmotionFinished', function(me) {
  if (document.cookie.indexOf('philosophie') >= 0) {
    document.getElementById('philosophie').scrollIntoView();
    document.cookie = 'progress=philosophie; expires=Thu, 01 Jan 1970 00:00:00 GMT';
    console.log("Cookie available");
    console.log(document.cookie.indexOf('philosophie'));
  } else {
    console.log("Cookie not available");
    console.log(document.cookie.indexOf('philosophie'));
  }
});

The Console Log (if code successfull)

Location → http://www.tanja-walker.de/
x-ua-device=desktop; __csrf_token-1=9aLkk4kGM1xa3ob3BwnxFm6jJE3td5; progress=philosophie
Cookie available
-1

The Console Log (if code unsuccesffull)

Location → http://www.tanja-walker.de/news/  
progress=philosophie; x-ua-device=desktop; __csrf_token-1=9aLkk4kGM1xa3ob3BwnxFm6jJE3td5  
Cookie not available 
-1

General Question(s)

What is the actual problem? Does the onClick-function not execute correctly. Do the cookies not save correctly? The point, that it works if I hit the philosophy navigationpoint twice on the index page the cookie is absolutely confusing, because it proves that the code is "kind of" correct.

I appreciate every help. Thank you in advance, Max K.

Edit:

Sorry forgot to mention that. It is some kind of $(document).ready for the framework the website is based on because the page loads dynamically and if I just use $(document).ready document.getElementById() doesn't execute properly.

Sadly doesn't work. What is the difference between .mousedown and .on('click') ? — Maximilian Konrad, May 11 '17 at 19:16
Sorry forgot to mention that. It is some kind of $(document).ready for the framework the website is based on because the page loads dynamically and if I just use $(document).ready document.getElementById() doesn't execute properly. — Maximilian Konrad, May 11 '17 at 19:29
@JustinHeath Tried that already as well. Didn't solve the problem, though. — Maximilian Konrad, May 11 '17 at 19:30
If you're loading the document dynamically, see http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Barmar, May 11 '17 at 19:45
Not certain what issue is? Can you create a plnkr https://plnkr.co to demonstrate? — guest271314, May 11 '17 at 19:47
@guest271314 Honestly. I really don't know. I tend to think it might be a problem how the cookie is stored or something like that. But it also could be a problem how the href is called (even though I rather doubt that) — Maximilian Konrad, May 11 '17 at 19:49
Changing line 12 of IDadder.js to `storage = document.cookie = 'progress=philosophie; expires=Thu, 01 Jan 2900 00:00:00 GMT;path=/;';` in Chrome works for me... — Justin Heath, May 11 '17 at 19:50
@JustinHeath Awesome. I have to try it tomorrow though, cause I am at home now and I don't have access to the files via this Laptop. But if it works in your chrome, it has to be the solution. I will give a feedback tomorrow. — Maximilian Konrad, May 11 '17 at 19:58
@guest271314 if Justins way doesn't work I will set-up one tomorrow. Thank you, though. — Maximilian Konrad, May 11 '17 at 20:00
See also [Global Variable usage on page reload](http://stackoverflow.com/questions/29986657/global-variable-usage-on-page-reload/) — guest271314, May 11 '17 at 20:01
@JustinHeath would be cool if you post you solution as answer so I can accept it and others can see the solution quickly if they have the same problem :) — Maximilian Konrad, May 11 '17 at 20:12

score 0 · Accepted Answer · answered May 11 '17 at 20:25

The issue is because the path attribute is not being explicitly set when creating the cookie. When the path attribute is not set, it defaults to the "current path of the current document location." MDN Cookie

So when the cookie is set while on the http://www.tanja-walker.de/news/ page, the cookie is set with a path of /news. When redirected to the website root (/), the cookie is not able to be fetched because the new location path and the cookie path differ.

Rewriting the code by adding the path attribute should work, and would look this this:

storage = document.cookie = 'progress=philosophie;' + 
     'expires=Thu, 01 Jan 2900 00:00:00 GMT;path=/;';

I tried it today and it solved my problem. Thank you – Maximilian Konrad May 12 '17 at 18:09 — Maximilian Konrad, May 12 '17 at 18:09
Awesome! Thanks for following up. Glad I could help! – Justin Heath May 12 '17 at 19:14 — Justin Heath, May 12 '17 at 19:14

onClick doesn't work the first time correctly

1 Answers1