Why Window.load Isn't Working When The Request Comes From Outside The Page, But Otherwise It Does?

SCENARIO The web app workflow is the following: Someone clicks on a a href element into a page. http://example.org/ The link is followed and then another page within the site is r

Solution 1:

Here's the problem: When navigating from the a link http://example.org/page-2/# to a different link that is the same page, but has a different hash var, like http://example.org/page-2/#keywordD, the site doesn't actually reload. This is default behaviour, because it's meant to jump to the element on the page with the id of the hash.

Luckily, there is an event for hash changes on the site.

'onhashchange'

Now depending on how your filtering works, you might want to call a function that does all the filtering (the one that does it on loading the page), or, if this is a server-side CMS thing, you might want to reload the page.

$(window).bind('hashchange', function(e) {
    // Enter your filter function heredoFiltering();
});

or if reloading the page is more appropritate.

$(window).bind('hashchange', function(e) {
    document.location.reload();
});

I don't quite understand what you mean by "This filter is based entirely on events and not on 'GUI visible' locations", so you might want to elaborate a little more in a comment, if I misunderstood you, but I hope either one of these soloutions work for you.

Solution 2:

THE ANSWER

Somehow I was triggering the event before the handler was attached, despite the window.load event is supposedly intended to trigger functions when all the DOM is entirely loaded.

https://stackoverflow.com/a/2060275/1126953

Kudos to Noah.

Based on the previous answer I could manage to set the desired behavior as it follows:

$( window ).load(function() {
   setTimeout(function() {
      var filter = window.location.hash.substr(1);
      if(filter == "keywordA") {
        $('a[data-filter=".cat-1"]').trigger('click');
      }
      if(filter == "keywordB"){
        $('a[data-filter=".cat-2"]').trigger('click');
      }
      if(filter == "keywordC"){
        $('a[data-filter=".cat-3"]').trigger('click');
      }
      if(filter == "keywordD"){
        $('a[data-filter=".cat-4"]').trigger('click');
      }
      if(filter == "keywordE"){
        $('a[data-filter=".cat-5"]').trigger('click');
      }
    },10);
  });

Just a simple delay.

Many thanks for your time Stefan.