Page reloaded about barba HOT 15 CLOSED

Hi there!
Thanks for using Barba and I'm really glad you like it!

Yes, It's the intended behaviour.
To be honest I hesitated if implementing it or not, but after thinking,
I'd like more to refresh the page instead of doing "nothing", which, can be frustrating for some users.

But I'm totally open to change the default behaviour if you have some good points.

A solution without replacing Barba.js code could be:

var links = document.querySelectorAll('a[href]');
var cbk = function(e) {
 if(e.currentTarget.href === window.location.href) {
   e.preventDefault();
   e.stopPropagation();
 }
};

for(var i = 0; i < links.length; i++) {
  links[i].addEventListener('click', cbk);
}

It basically register an handler that runs before the one of Barba.js, it checks if the href is the same of the current url, and if yes it prevent the default behaviour and stop the propagation.

from barba.

Thanks @luruke and @ZachSaucier !
Your proposal works perfectly.

However, I think it might be interesting to choose the behavior via a static value.

Possible behaviors:

• full page reload
• nothing
• onLeave -> onEnter (to replay transition)

from barba.

Is there meanwhile a setting to disable the reload behavior , please ?

from barba.

Thank's for the amazing work @luruke
I attach, for those who might need, my simplified jquery version
(to prevent the reload of the current page)

`$(document).ready(function() {

$(document).on('click','a[href]', function(e){
	if(e.currentTarget.href === window.location.href)
	{
		e.preventDefault();
		e.stopPropagation();
	}
});

});`

from barba.

@quentinhocde , I see your point.

I'm going to think how and if implement this in the next version 👍

Thank you so much for your feedback!
Do not hesitate to open a new issue if you have some other improvements

from barba.

I agree with @jdacosta, for a personal example, I have a fullscreen menu and it's possible to click on the current link, and in this case I want to replay the transition.

So, in my opinion, it will be a choice with a parameter.

from barba.

I know this is an old old "issue", and it is default behaviour ...

However, currently I am building a site with a built in audio player outside of the barba container to ensure continuous playing while the user can browse the site.

But any link referencing the same page does a reload and thus stops the player which is kinda annoying for such a use case.
I am using barbajs version 2.0 and it would really be nice to have a switch to turn this behaviour on or off!

It also took me some time to figure out that this behaviour was default (google brought me here). Is it mentioned in the docs anywhere, I have not stumbled upon it?

from barba.

Hi there. First of all sorry for posting in an old and closed issue, but I think in this case it's better than opening a new one.

On the issue, I'd argue that the proper and expected default behavior should be to actually "navigate" to the same page, thus doing the exact same things as with any other page. This is what all web browsers do.

Another reason for this is that, as demonstrated, preventing links to the current url hard-reloading is trivial, but I've been trying to (re)navigate to the current page using barba.go(e.currentTarget.href) and it doesn't seem to work, it does nothing. If I instead do barba.go(e.currentTarget.href + '/test'), it works, so there seems to be some check in the go() function to do nothing when it's the current url. In other words, no easy way to implement what in my opinion should be the default behavior.

I think the current behavior is the worse that could have been chosen (between hard reload, navigating to same page or doing nothing), because BarbaJS's main purpose is precisely to avoid hard reloads.

I hope you can give a go at rethinking this design decision, as you can see from other comments in this and other issues, it maybe wasn't the best one. Or maybe at least add a strategy to choose between the three behaviors, maintaining the current default.

from barba.

+1 !

from barba.

The preventCheck function inside of Pjax.js should be doing this already... I'll test

Update: Can produce. The function is indeed returning false as it should be... weird

from barba.

Ah, I understand. It doesn't fire the barba link action but also doesn't prevent the native link from firing.

I recommend moving that check inside of the onLinkClick function:

  onLinkClick: function(evt) {
    var el = evt.target;

    //Go up in the nodelist until we
    //find something with .href
    while (el && !el.href) {
      el = el.parentNode;
    }

    if (this.preventCheck(evt, el)) {
      evt.stopPropagation();
      evt.preventDefault();

      //In case you're trying to load the same page
      if (Utils.cleanLink(el.href) == Utils.cleanLink(location.href)) {
        Dispatcher.trigger('linkClicked', el);
        this.goTo(el.href);
      }
    }
  },

And removing it from preventCheck of course

from barba.

@jdacosta
Have you been able to solve this?
How did you solve at the end?

from barba.

I wonder if there's a way to disable to same links hard reload without changing the barba.js code ? It would be really useful because of the upgrades. I don't want to disable the same page links, but that the page could repeat the transitions.

from barba.

I am having the same issue but can not seem to get @luruke solution to work? Not sure where I should be placing that code snippet?

My code below:

import Barba from 'barba.js';

document.addEventListener("DOMContentLoaded", function() {

  Barba.Pjax.init();
  Barba.Prefetch.init();

	var links = document.querySelectorAll('a[href]');
		var cbk = function(e) {
		 if(e.currentTarget.href === window.location.href) {
		   e.preventDefault();
		   e.stopPropagation();
		 }
	};

	for(var i = 0; i < links.length; i++) {
		links[i].addEventListener('click', cbk);
	}

  var FadeTransition = Barba.BaseTransition.extend({
    start: function() {
      Promise
        .all([this.newContainerLoading, this.fadeOut()])
        .then(this.fadeIn.bind(this));
    },

    fadeOut: function() {
      this.oldContainer.classList.toggle('fade-out');
      return new Promise(function(resolve, reject) {
          setTimeout(function() {
             resolve();
         }, 500);
      });
    },

    fadeIn: function() {
      this.newContainer.classList.toggle('fade-in');
      this.done();
    }
  });

  Barba.Pjax.getTransition = function() {
    return FadeTransition;
  };

  Barba.Pjax.start();
});

Many thanks in advance!

from barba.

Hi there.
Got the same issue. I was able to fix it with this link from Barba's FAQs.
https://barba.js.org/docs/advanced/strategies/#prevent

All you need is to add this function "data-barba-prevent" or "data-barba-prevent="self"" next to your link and it wont reload on the same page again.

E.g:
<a href="/index.html" data-barba-prevent>Home</a>

Good Luck,

from barba.