Barba: Scripts within container are not evaluated

[ZachSaucier]

When a new container is loaded, any <script> tags within the container are not evaluated by default. This is because the browser doesn't know to look for JavaScript within the added HTML.

This is not necessarily a bad thing, given it could lead to duplicated code running such as event listeners, but I thought it would be useful to report and discuss.

If you want to run any code within the <script> tags, evaluate them by using something like eval(this.newContainer.querySelector("script").innerHTML); just before you run this.done() on the transition

[luruke]

Hi @ZachSaucier, on purpose I don't want the javascript being evaluated when loading a new container.

The idea behind Barba.js and PJAX navigation is that you evaluate your js/css just on the first page where the user lands.

You have Events and Views made specifically to run code when a new container is loaded.

Anyway, if you want to can easily implement this behavior with something like this:

Barba.Dispatcher.on('newPageReady', function(currentStatus, oldStatus, container) {
    eval(container.querySelector("script").innerHTML);
});

[johannesmutter]

To prevent warning for non existing script elements — _(Cannot read property 'innerHTML' of null(…))_
However: eval is evil 😉

Barba.Dispatcher.on('newPageReady', function(currentStatus, oldStatus, container) {
    var js = container.querySelector("script");
    if(js != null){
        eval(js.innerHTML);
    }
});

[brandlewco]

do you have an example of this for 2.x

[moisesmissecart]

barba.hooks.after((data) => {
    let js = document.querySelectorAll('#main script');
    if(js != null){
         js.forEach((item) => {
             eval(item.innerHTML);
         });
    }
});

[frunkad]

This worked for me in v2

barba.hooks.after((data) => {
    let js = data.next.container.querySelectorAll('main script');
    if(js != null){
            js.forEach((item) => {
                console.log(js)
                eval(item.innerHTML);
            });
    }
});

[MrEyelet]

Where should I attach this code ? I have main.js script where I have imported some other scripts including barba transition.

The script looks like this:

But it doesnt help, my main.js script is not reinitialized

[MrEyelet]

Ok, in my case I did it like this, and it solved my roadblock

barba.hooks.after(() => { const bottomDOM = document.getElementsByTagName("body")[0] const newScript = document.createElement("script") const oldScript = document.querySelector(".main-script") newScript.src = "js/main-dist.js" newScript.className = "main-script" oldScript.remove() bottomDOM.appendChild(newScript) })