Browser loads new page if a link contains an anchor about barba HOT 25 CLOSED

The following solved the issue for me:

 Barba.Pjax.originalPreventCheck = Barba.Pjax.preventCheck;

    Barba.Pjax.preventCheck = function(evt, element) {
        if ($(element).attr('href') && $(element).attr('href').indexOf('#') > -1)
            return true;
        else
            return Barba.Pjax.originalPreventCheck(evt, element)
    };

from barba.

so the easiest workaround for this is editing barba.js on line 1341
from:

//Ignore case when a hash is being tacked on the current URL
        if (href.indexOf('#') > -1)
          return false;

to:

 //Ignore case only for same page hash urls, not for different page hash urls       
       if (location.href.indexOf(href) > -1 && href.indexOf('#') > -1)
          return false;

you might want to consider adding an option or replacing it with this, as using hashes for triggering other functions such as filters etc. is pretty common.

from barba.

hi @luruke,

yes it works perfectly fine. perhaps url.split('#')[0]; instead of url.replace(/#.*/, ''); is a better option performance wise, but im not sure about that.

the reason of my workaround is another one tho.

e.g.
In my project i have an anchor in index.html which links me to "shop.html#gold", the reason i'm doing this is, because #gold triggers a filter function, which only show me products of the "gold" collection. However with

 if (href.indexOf('#') > -1)
          return false;

the href="shop.html#gold" is ignored by barba.js
While i think its good to ignore urls with a hash on the same page (for scrolling to anchors) it should not ignore hrefs that link to another page with a hash.
Thats why i changed it, so it only returns flase, if the href contain a hash AND links to the same page

you get my point?

awesome module btw 🔥

from barba.

Here's a non-jQuery fix based off @AlexandraKlein 's code:

    Barba.Pjax.originalPreventCheck = Barba.Pjax.preventCheck;

    Barba.Pjax.preventCheck = function(evt, element) {
      if (
        element.getAttribute("href") &&
        element.getAttribute("href").indexOf("#") > -1
      )
        return true;
      else return Barba.Pjax.originalPreventCheck(evt, element);
    };

from barba.

I worked around with a little function. So because href="/#myanchor" doesn´t work with barba.js as described above, I only link to / and then scroll to anchor after timeout.

<a href="/" onclick="pageScroll('myanchor')">

function pageScroll(x) {
  
  setTimeout(function () {
    $('html, body').animate({
          scrollTop: $('#'+x).offset().top
      }, 1000);
  }, 1000);
  
}

from barba.

@AlexandraKlein solution works sweet for me, then i manage by my own the scrollTo if there is a hash in the URL, thank you so much

from barba.

Hi @jdoubleu, I'm in vacation at the moment.
I'll try to reply in the next few days

from barba.

👍 +1 noticed this as well

from barba.

did anybody already write a workaround for this? Otherwise I'll give it a try. Saving the Hash, then removing it and apply it after transition sounds like a straight forward idea.

from barba.

Hello @max-schu
Actually it should already ignore link of the same page:

    //In case you're trying to load the same page
    if (Utils.cleanLink(href) == Utils.cleanLink(location.href))
      return false;

.cleanLink it removes the hash from an url.

Does it works for you?

from barba.

+1 for this issue (and for the awesome module comment)

from barba.

@max-schu Sorry for the late reply, I've been very busy.
Yes, it makes sense.
But if you are using standard Fragment identifier the browser will not scroll to the specified element if the transition is made with PJAX.

In your case I guess you're detecting the filter on the page shop.html via JS, right?
If so, it would make more sense using a get parameter? no?

from barba.

totally makes sense. didnt see it that way. I'm sure there a way to use get parameters, im just not quite familliar with these so i decided to use hashes. However maybe it's an option to manually execute scrolling to an anchor after the page transition is done and url contains a hash. After all this would be a rather specific improvment, i'm sure anyone facing this issue, can make his way through with a workaround.

from barba.

Yep, scrolling to the element could be a solution.
But I would like to go through the specification to understand better how needs to work in specific cases (for example what if the element is hidden and etc.).

I will face this thing on the new release :)

Thank you again

from barba.

+1 with Isotope filtering.

<a href="/work#filter=.filter-item--vfx" tabindex="0">More VFX</a>

Anchor to go to work page filtered already by items that are only "VFX".

Barba ignores this and reloads the page.

from barba.

Is there any update or new ideas on this issue..? I tried all posted proposals and nothing worked for me!
Thanks

from barba.

+1 noticed this as well

from barba.

Same here

from barba.

@HectorLS would you be able to share your solution Hector? Getting this working right and finding the right solution is proving a little illusive to me!

from barba.

@deanc Solution works great, but I was getting errors when element was null. As such, I made a slight tweak that checked for element in order to clean up any errors while still preserving the overall fix.

Barba.Pjax.originalPreventCheck = Barba.Pjax.preventCheck;

Barba.Pjax.preventCheck = function(evt, element) {
  if (
    element &&
    element.getAttribute('href') &&
    element.getAttribute('href').indexOf('#') > -1
  )
    return true;
  else return Barba.Pjax.originalPreventCheck(evt, element);
};

from barba.

Here is what I do ( barba2 )

barba.hooks.beforeEnter((data) => {
// Also update menu here
updateHardReloadLinks(data.next.href);
});

    /**
     * Updates links that point to the current page
     */
    function updateHardReloadLinks(url) {
      const currentUrl = url || window.location.href;

      Array.from(
        document.querySelectorAll('[data-barba-prevent]')
      ).forEach((link) => link.removeAttribute('data-barba-prevent'));

      Array.from(document.querySelectorAll('a')).forEach((link) => {
        if (barba.url.clean(link.href) === barba.url.clean(currentUrl))
          link.setAttribute('data-barba-prevent', true);
      });
    }

    /**
     * Prevent Barba hard reload
     */
    document.addEventListener('click', (event) => {
      if (event.target.closest('[data-barba-prevent]')) {
        event.preventDefault();
      }
    });
   updateHardReloadLinks()

from barba.

this seems to still not be working. none of these workarounds seem to function either. are there any other, similar libraries for this stuff i can use instead?

from barba.

from barba.

I had the same (or similar) issue and the solution was to timeout the changing of the url#hash.

// without setTimeout it throws an error
      setTimeout(function () {
        // set the hash
        if (storedHash) location.hash = storedHash;
      }, 100 );

See error below:

Uncaught RangeError: Maximum call stack size exceeded.
    at t.e.force (barba.umd.js:1)
    at t.e.go (barba.umd.js:1)
    at t.e.D (barba.umd.js:1)
    at t.e.force (barba.umd.js:1)
    at t.e.go (barba.umd.js:1)
    at t.e.D (barba.umd.js:1)
    at t.e.force (barba.umd.js:1)
    at t.e.go (barba.umd.js:1)
    at t.e.D (barba.umd.js:1)
    at t.e.force (barba.umd.js:1)

Solution

{
    namespace: "clippings",
    
    afterEnter(data) {
      const cliplnk = document.querySelectorAll('a.timestamp');
      
      cliplnk.forEach(  el => el.addEventListener("click", () => {
          // Store data
          let hash = el.id;
          localStorage.setItem('anchor', hash);
        }
      ));
      
      // Get data
      const storedHash = localStorage.getItem('anchor');
      
      // without setTimeout it throws an error
      setTimeout(function () {
        // set the hash
        if (storedHash) location.hash = storedHash;
      }, 100 );
      
      setTimeout(function () {
        localStorage.removeItem('anchor');
        console.log('cleared hash');
      }, 500 );
    },
  }

from barba.

FYI, a recent similar issue (not fixed yet) recently happen to another developer.

See #720.

from barba.