jQuery click event after new page loads

Question

I've got a web project using Node/Express/Handlebars

I've got a sticky navigation on the side which is rendered through a handelbars partial.

When a link is clicked and the page loads I want the active state to change to the element that was clicked. I've tried both .click() and .on('click', child, callback) . It works when I click it, but it resets after the DOM reloads.

Thank you kindly for your help Stackoverflow.

Here's my jQuery:

//NAVIGATION ACTIVES
$('.stickynav').on('click', '.platform-nav',
  function() {
    $('.main-hand').removeClass("nav-active");
    $('.sticky-hand').removeClass("nav-active");
    $(this).addClass("nav-active");

  });
$('.stickynav').on('click', '.tools-nav',
  function() {
    $('.main-hand').removeClass("nav-active");
    $('.sticky-hand').removeClass("nav-active");
    $(this).addClass("nav-active");
  });
$('.stickynav').on('click', '.diensten-nav',
  function() {
    $('.main-hand').removeClass("nav-active");
    $('.sticky-hand').removeClass("nav-active");
    $(this).addClass("nav-active");
  });
$('.stickynav').on('click', '.blog-nav',
  function() {
    $('.main-hand').removeClass("nav-active");
    $('.sticky-hand').removeClass("nav-active");
    $(this).addClass("nav-active");
  });

And HTML (.hbs) :

<div class="stickynav" data-spy="affix">
  <div class="hands-connector">
        <img src='/img/connector-sticky.png'  />
  </div>


<div class="hands-sticky">
  <div class="sticky-hand platform-nav nav-active" id="platform-sticky">
    <a href="/">        <img src="/img/platform-sticky.png" alt="Naar kennisplatform" />
            <p>Kennisplatform</p></a>

  </div>
  <div class="sticky-hand tools-nav" id="tools-sticky">
    <a href="/tools">
        <img src="/img/tools-sticky.png" alt="Naar gratis tools" />
        <p>
          Tools
        </p>
      </a>
  </div>
  <div class="sticky-hand diensten-nav" id="diensten-sticky">
    <a href="/diensten">
        <img src="/img/diensten-sticky.png" alt="Naar diensten" />
        <p>
          Diensten
        </p>
    </a>
  </div>
  <div class="sticky-hand blog-nav" id="blog-sticky">
    <a href="/blog?page=1">
        <img src="/img/blog-sticky.png" alt="Naar blog" />
      <p>
        Blog
      </p>
    </a>
  </div>
</div>
</div>

and the CSS class for reference (disables the link) :

.nav-active {
  text-decoration:none;
  color:black;
  -webkit-filter: drop-shadow(1px 1px 0 blue) drop-shadow(-1px -1px 0 blue);
  -ms-filter: drop-shadow(1px 1px 0 blue) drop-shadow(-1px -1px 0 blue);
  filter: drop-shadow(1px 1px 0 blue) drop-shadow(-1px -1px 0 blue);
  pointer-events:none;
  cursor:default;
}

Should be adding the class on page load...based on current url loaded. After a click on a link the current page script is gone and it starts all over again on new page — charlietfl, Nov 28 '17 at 05:16
I was thinking of that just now, but at 6:15 AM I have no clue how to do that. Any pointers would be greatly appreciated. Of course I could always just add the stickynav without a partial in their respective templates and manually put the class there. But I thought jQuery might be able to help me out here and prevent reusing code. — Kyriediculous, Nov 28 '17 at 05:19
There are lots and lots of similar questions on how to do this on page load. You basically just compare the `href` of the nav links to the `location` ... if all the `href` are relative compare them to `location.pathname` — charlietfl, Nov 28 '17 at 05:20

JBoothUA · Accepted Answer · 2017-11-28T05:21:45.120

1

I'm not sure if what you're trying to do is possible or not..

If the page reloads, you will lose any state that isn't somehow backed up. So you'll need some sort of data source or session.

If you do not need the page to reload, you can "return false;" at the end of your click functions and that should prevent the page reload and give you the class changes that you're looking for.

if your click event is changing the route, i'd recommend a script that runs after the page load is complete (on document ready)

$(function () { your code here })

that checks the current route and sets the css classes there based on the route. (instead of based on what was clicked, since you'll lose that information on a page load, but you will still have the route.)

location.href

edited Nov 28 '17 at 05:21

answered Nov 28 '17 at 05:04

JBoothUA

3,040
3
17
46

The links direct to different routes which render on their turn handlebars templates. Would using a default layout prevent the navigation from reloading on route change? Can I use .click( function() { $(document).load(callback) }; ? – Kyriediculous Nov 28 '17 at 05:12
there are Single Page Applications (SPA) that can change the route without doing a page load. but in your case of a page reloading, i'd recommend a script that runs after the load is complete (on document ready) $(function () { your code here }) that checks the current route and sets the css classes there based on the route. (instead of based on what was clicked, since you'll lose that information on a page load, but you will still have the route) – JBoothUA Nov 28 '17 at 05:17
Thanks for the edit , and the help of course! With some googling around I found this regex to split the URL and get the strings for the paths I need to work easily. var path = window.location.href.split(/^(([^:\/?#]+):)?(\/\/([^\/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/); var path = path[5] gives first directory without queries. – Kyriediculous Nov 28 '17 at 05:56

score 1 · Answer 2 · answered Nov 28 '17 at 05:17

HTTP is stateless.

Anytime a page is refreshed, its state is lost, and your page doesn't know where it was. So, you need to figure out a way to persist the state across your pages.

For example, you can use browser's this API to persist the state in local storage. Local storage is persistent for a hostname. So, anytime a link is clicked, you can store its details in the local storage, and when your DOM is ready again, you can read the same value from the local storage and make that link active.

More ways can be found out in this discussion.

Using localStorage to keep track of navigation is ugly....just use the `location` — charlietfl, Nov 28 '17 at 05:19

score 1 · Answer 3 · answered Nov 28 '17 at 05:23

1

You can not do it this way, because when page is reloaded, it is a complete new HTTP request and it looses the last even performed on previous page. what you can do is based on the url you can set the class = "nav-active" using server side scripting, say you are using php then you can try something like

Setting $page = "platform"

and while writing html you can add

<div class="sticky-hand tools-nav" id="tools-sticky" class="<?php ($page=='tools')?"active":"" ?>" >
<div class="sticky-hand platform-nav" id="tools-sticky" class="<?php ($page=='platform')?"active":"" ?>" >

answered Nov 28 '17 at 05:23

Arpita

1,386
1
15
35

What's with the php? no php tag on this question. OP is running node/express on server – charlietfl Nov 28 '17 at 05:25
that was just an example of adding dynamic classes through php, I am sure node will have something equivalent of this. – Arpita Nov 28 '17 at 05:38

jQuery click event after new page loads

3 Answers3

Linked