Barba: Barbas make all my other js stop

[loicng]

Hello i search a lot
i also see dispatcher and other code
but nothing worked

when i use barba js
all my other script didnt load on newpage .
but it appear

can anyone know how to solve it?

[tan-ahmed]

I have same issue but I believe it's something to do with this:
https://github.com/luruke/barba.js/issues/32

I literally just need my lazy load script to run
var bLazy = new Blazy();

[comrx]

When any site does an AJAX call, it cannot re evaluate script tags. Please see this issue: #32

You need to reinitialize your scripts in using barba events. http://barbajs.org/events.html

For instance:

Barba.Dispatcher.on('newPageReady', function(currentStatus, oldStatus, container) {
  // Re-init your scripts here.
});

So for tan-ahmed's example, you'd have the bLazy script outside of the barba container, and initialize in in JS.

Barba.Dispatcher.on('newPageReady', function(currentStatus, oldStatus, container) {
  var bLazy = new Blazy();
});

Please note that using barba.js requires a lot of planning if it's for a large site. It's best to try and cut down on useless plugins that aren't helping the overall user experience, and thus causing less headaches such as this.

[adisoftUmag]

Hello

Related to this problem. How can i reinitialize this part of code which dont work after barba.js load new page

        $('#dole').on('click', function() {
          $('#dole').toggleClass('active');
        });

I make all work when i put it in finish after this.done();

        finish: function() {
          document.body.scrollTop = 0;
          this.done();
          $('#dole').on('click', function() {
            $('#dole').toggleClass('active');
          });
        }

but i'm interested how to do it with - Barba.Dispatcher.on

[comrx]

@adisoftUmag You would probably want to use the transitionCompleted event, which fires after the old page has left the DOM and the new page has transitioned in. So it would be as follows:

Barba.Dispatcher.on('transitionCompleted', function(currentStatus, oldStatus, container) {
  $('#dole').on('click', function() {
       $('#dole').toggleClass('active');
     });
});

[adisoftUmag]

@c0mrx Thx for help. It works

[tan-ahmed]

@c0mrx
You legend!!

I did

<script>
jQuery(document).ready(function($) {
    Barba.Dispatcher.on('transitionCompleted', function (currentStatus, oldStatus, container) {
    var bLazy = new Blazy();
  });
});
</script>

and this solved my problem, thanks so much dude

[Alaamasoud]

Hello,
How can i fix this problem if i use v2 ?

[Jonatan-r]

@c0mrx
You legend!!

I did

<script>
jQuery(document).ready(function($) {
    Barba.Dispatcher.on('transitionCompleted', function (currentStatus, oldStatus, container) {
    var bLazy = new Blazy();
  });
});
</script>

and this solved my problem, thanks so much dude

Doesn't seem to be working for current version? v2?

This is dead: http://barbajs.org/events.html

Can't find anything like this in new docs?

[comrx]

@Jonatan-r This response was for v1. For v2 you'll have to use Hooks. You can see all of the different hooks here.

Example:

barba.hooks.enter(() => {
  // init your js here
});

[Jonatan-r]

@comrx Thank you!!! 😄 Sorry, stupid me hadn't explored the docs thoroughly enough

[comrx]

@Jonatan-r,

No problem, happy coding! 😄

[Jonatan-r]

@comrx Thanks!

I had understood this though: http://barbajs.org/events.html :

barba.init({
  views: [{
    namespace: 'home',
    before() {
      // update the menu based on user navigation
      menu.update();
    },
    enter() {
      // refresh the parallax based on new page content
      parallax.refresh();
    }
  }]
});

– As if I could just dump my scripts in the enter() and then it would run.. but it sems that doesn't work

[Jonatan-r]

@Jonatan-r This response was for v1. For v2 you'll have to use Hooks. You can see all of the different hooks here.

Example:

barba.hooks.enter(() => {
  // init your js here
});

Yup. This works perfectly :)))

[mirmoc]

I'm on V3 and it doesn't seem to work. How can I make it work?

`
enter () {
Barba.Dispatcher.on('transitionCompleted', function(currentStatus, oldStatus, container) {
$(".wrapper-intro-text, #logo").on("click", function (e) {
e.preventDefault();
$("body").toggleClass("on");
});

                $(".hamburger").on("click", function (e) {
                    e.preventDefault();
                    $("body").toggleClass("min");
                });
              });
        }

`

[comrx]

Hi @mirmoc!

Barba.Dispatcher is for use in V1. I see you're using Hooks, so the proper code here would be:

... 

enter () {
  $(".wrapper-intro-text, #logo").on("click", function (e) {
    e.preventDefault();
    $("body").toggleClass("on");
  });

  $(".hamburger").on("click", function (e) {
    e.preventDefault();
    $("body").toggleClass("min");
  });
}

For the .hamburger... It would be best to add that listener globally (outside of the barba function), since it's sitting outside of the barba container and only needs that listener once.

I'd also caution using .toggleClass(), and actually replace that with a hasClass conditional, like so:

  $(".hamburger").on("click", function (e) {
    e.preventDefault();
    if ($('body').hasClass('min') == false) {
      $("body").addClass("min");
    } else {
      $("body").removeClass("min");
    }
  });

Anything outside of the barba container only needs listeners added once, as they never leave the DOM (unless you change them yourself with custom code). Therefore, it's best to keep them out of the transition code and have them initialized on their own.

If you need something to run after every transition regardless of namespace, you can also use Global Hooks. These should be kept outside of the transition function as well:

barba.hooks.enter(() => {
  window.scrollTo(0, 0);
});

Hope this helps!