1

So I have one index file that has few js files are included like Gsap & Barba JS. But I have one inner page that includes some extra js files such as locomotive.js & OWLcarousel.js and please note that these two Js files (locomotive.js & OWLcarousel.js) are not included on index page as they are not required. The issue is the inner page opens after completing the index page transition but without loading these two JS files (locomotive.js & OWLcarousel.js). As a result both locomotive scrolling & OWL carousel are not working. However, If I'll refresh the inner page once then these two Js files (locomotive.js & OWLcarousel.js) are loading and everything works fine. So how to load JS files in Barba.Js for inner pages?

Update: I have created a minimal demo and you can see that inner page is not loading the JS and CSS of Locomotive and also OWL carousel if click on heading text on homepage and navigate to inner. But if refresh the page then both locomotive & owl carousel are working fine in inner page. How to fix this? I have added the suggested change to the JS file (https://bootstrap-awesome.com/barba-test1f/js/main-test.js) Demo Link: https://bootstrap-awesome.com/barba-test1f/index-test.html

So I tried to load the additional JS files in the same below format but nothing happens. Can anyone guide me with this please?

barba.init({
  views: [{
        namespace: 'home',
        beforeEnter({ next }) {

        // load your script
        let script = document.createElement('script');
        script.src = '<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script>'; 
script.src = '<script src="js/owl/owl.carousel.js"></script>';
        next.container.appendChild(script);
        }, 
    }],

enter image description here

Error in the Network console

UPDATE @wouch

The below is what I have tried but still not working. Also, how to load Locomotive external CSS?

JS: bootstrap-awesome.com/barba-test1f/js/main-test.js

Demo : https://bootstrap-awesome.com/barba-test1f/index-test.html

views: [{
    namespace: 'home',
    beforeEnter({ next }) {
      // Script URLs to load
      let pageScriptSrcs = [
        'https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js',
        'js/custom-scroll.js',
        'js/owl/owl.carousel.js',
        'js/owl/owl-custom.js'
      ]
      
      pageScriptSrcs.forEach(scriptSrc => {
        let script = '<script src="' + scriptSrc + '"><\/script>';
        console.log(script);
        next.container.appendChild(script);
      })
    }
    },
    {
    namespace: 'projdetailpage',
    beforeEnter({ next }) {
      // Script URLs to load
      let pageScriptSrcs = [
        'https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js',
        'js/custom-scroll.js',
        'js/owl/owl.carousel.js',
        'js/owl/owl-custom.js'
      ]
      
      pageScriptSrcs.forEach(scriptSrc => {
        let script = '<script src="' + scriptSrc + '"><\/script>';
        console.log(script);
        next.container.appendChild(script);
      })
    }

  }],
bootstrap
  • 73
  • 7
  • It could be something with the paths. Have you checked in the Network-tab in your developer tools, if the files are attempted to be loaded but gives a 404? ... And can you add to your question, how these two files are loaded/added to your project. It might be something related to that. – Zeth Dec 29 '21 at 08:27
  • @zeth added the error screenshots from the network console. Can you please have a look? But everything works fine if I refresh the page but not after the page transition from home to inner page. – bootstrap Dec 29 '21 at 08:48
  • It looks like you're creating a ` – wouch Dec 29 '21 at 17:50
  • @wouch Can you pls show me how to do that? – bootstrap Dec 30 '21 at 07:44

1 Answers1

0

I would try something like this, where you add the scripts you want in an array, then loop through each one and build a <script src="..."></script> string and append to the next container.

barba.init({
  views: [{
    namespace: 'home',
    beforeEnter({ next }) {
      // Script URLs to load
      let pageScriptSrcs = [
        'https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js',
        'js/owl/owl.carousel.js'
      ]
      
      pageScriptSrcs.forEach(scriptSrc => {
        let script = '<script src="' + scriptSrc + '"><\/script>';
        console.log(script);
        next.container.appendChild(script);
      })
    },
  }],
})
wouch
  • 1,097
  • 4
  • 6
  • I have created a minimal demo and you can see that inner page is not loading the JS and CSS of Locomotive and also OWL carousel if click on heading text on homepage and navigate to inner. But if refresh the page then both locomotive & owl carousel are working fine in inner page. How to fix this? I have added the suggested change to the JS file (https://bootstrap-awesome.com/barba-test1f/js/main-test.js) Demo Link: https://bootstrap-awesome.com/barba-test1f/index-test.html – bootstrap Jan 03 '22 at 10:35
  • Because of the `views` where the `beforeEnter ({})` is contained only refers to the `'home'` namespace this script will only run on that page. You would want to add the JS to every namespace you want it to run in, or use [barba.js hooks](https://barba.js.org/docs/advanced/hooks/) – wouch Jan 04 '22 at 23:55
  • wouch - so you mean to say that a separate name space for inner page like below in this case, right? So locomotive CSS also add there? views: [{ namespace: 'projdetailpage', beforeEnter({ next }) { let pageScriptSrcs = [ 'https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js', 'js/owl/owl.carousel.js' ] pageScriptSrcs.forEach(scriptSrc => { let script = ' – bootstrap Jan 05 '22 at 04:29
  • Hi Wouch, I have updated the js file (https://bootstrap-awesome.com/barba-test1f/js/main-test.js) but still the scripts are not loading. Can you tell me what mistake i am making here, please? Also, how to load locomotive CSS here? – bootstrap Jan 05 '22 at 04:59