Doesn't work on sub menu Bootsrap 5 and clearer explanation about initializing plugins about pjax.js

[Allmedialab]

Found the solution! Excellent script! David

[brcontainer]

@Allmedialab thank you very much for your interest.

Let me see if I understand, apparently hidden items are not updated by clicking on a menu item or a carousel item? Or are you failing to update the menu items and carousel?

Could you provide an example of the problem?

[Allmedialab]

Hi,

The main js is in the app.js file in the js folder. Just need to know how to initialize the stuff in my website. For example on the Home page you have a Bootstrap 5 carousel with Greensock Animation that you can see when you refresh the page.

The issue with the submenu is when you click on the submenu Projecten > Vrijwilligers you can see that pjax is due to non init of the jarallax effect on the image. The same problem as all other pages.

Scroll top doesn't work as well, it looks like its activated to 0 in the script, but I could be wrong.

Oh and there is no jQuery involved!

Regards & Thanks,

David

[brcontainer]

@Allmedialab you can configure the events (https://github.com/brcontainer/pjax.js#pjax-events) and load your compl function as you see fit.

Like this:

Pjax.start();
Pjax.on("then", function (url, stateData) {
    compl();
});

And depending on the situation it is good to check with the history event if your scripts are configured, of course:

Pjax.start();

// Execute on 
Pjax.on("then", function (url, stateData) {
    compl();
});

// Execute on back or forward navigation
Pjax.on("history", function (url, stateData) {
    compl();
});

In the case of back or forward it is good to check the state of your javascripts in the elements. ;)

[Allmedialab]

Hi @brcontainer,

Could you be so kind to give a hands on example? On my home page this is initializing the carousel with text animation:

document.getElementById('carousel').addEventListener('slide.bs.carousel', function (e, a) {

  let slides = e.target.querySelectorAll('.carousel-item');
  let from_slide = slides[e.from];
  let to_slide = slides[e.to];
  pgia.play(from_slide, 'Hide');
  pgia.play(to_slide, 'Show');
  });
  onReady(() => {
  let slides = document.querySelectorAll('#carousel .carousel-item');
  let first_slide = slides[0];
  pgia.play(first_slide, 'Show');
  });
  var myCarousel = document.querySelector('#carousel')
  var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 5000
  })

Regards & Thanks,

David