Scripts within container are not evaluated about barba HOT 10 CLOSED

Be good if there was a data-barba-script attribute you could attach to inline <script> tags. So Barba know there's a script that needs execution. You could make it execute on newPageReady by default.

<script data-barba-script>...</script>

from barba.

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);
});

from barba.

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);
    }
});

from barba.

do you have an example of this for 2.x

from barba.

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

from barba.

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);
            });
    }
});

from barba.

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

from barba.

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)
    })
    ```

from barba.

Using afterLeave hook worked for me.

barba.hooks.afterLeave((data) => {
			const js = data.next.container.querySelectorAll("script.reload-on-ajax");
			console.log(js);
			[].forEach.call(js, function (script) {
				console.log(script);
				window.eval(script.innerHTML);
			});
		});

from barba.

Hi.

here is my Barba code:

barba.init({
     sync: true,
     transitions: [
       {
         async leave(data) {
           const done = this.async();

           pageTransition();
           await delay(1100);
           done();
         },
       },
     ],
   });

Can you please tell, what code and where should I insert it, so other scripts won't break.

Thanks in advance!

from barba.