I’m trying to implement barba.js on a HubSpot
site.
Consider the following two pages:
- Resources
- Customers
With my current barba.js
implementation, this is the current flow I’m experiencing:
- I access the
resources
page (not by transitioning to it, by directly accessing it via/resources
). - At this point, all my
js
is working (slick-sliders
, scroll functions etc) - I then use the nave to try and access the
customers
page. The page loads, but all of thejs
specific to modules for that page are not working.
In short, js
for pages that I transition
to do not work.
To resolve this, what I’m trying to do is to reload all scripts
within the container
beforeEnter()
.
See below:
$(function() {
function delay(n){
n = n || 2000;
return new Promise((done) => {
setTimeout(() => {
done();
}, n);
});
}
barba.init({
sync: true,
prefetchIgnore: true,
debug: true,
transitions: [{
async leave(data){
const done = this.async();
await delay(200);
done();
},
async beforeEnter({ next, container }) {
$(container).find('script').each(function (i, script) {
var $script = $(script);
$.ajax({
url: $script.attr('src'),
cache: true,
dataType: 'script',
success: function () {
$script.trigger('load');
}
});
});
},
async enter(data){
let scrollX = 0
let scrollY = 0
barba.hooks.leave(() => {
scrollX = barba.history.current.scroll.x;
scrollY = barba.history.current.scroll.y;
});
window.scrollTo(scrollX, scrollY);
},
async once(data){
console.log("done");
},
}]
});
});
However, my current beforeEnter()
still yields the same results. Any way around this?