Barba: Popstate events doesn't call hooks when url have query string

[ctf0]

The problem

when using back / forward while the url have a query string, barba doesnt fire any events, therefor we cant get the https://barba.js.org/docs/advanced/hooks/#data-properties data.trigger to manually force reload the page.

Steps to reproduce issue [ Good To Have ]

• setup barba hooks before, after and log their data
• create 3 links 2 with a query string & 1 without
• click the normal link first
• then click the 2 qs links
• now press the back btn and check ur console
• url will change but the hook events wont fire, only when u get to the normal url, something will be logged.

---

Environment

• Barba version that exhibits the issue: "@barba/core": "^2.9.7",
• Build used:
  
  
  
  • [ ] module (esm/)
  
  
  • [ ] browser (dist/)
  
  
  • [x] main (lib/)
  
  
• Browser OS/version used: OSX 10.14.6 / Chrome 83.0.4103.97

[xavierfoucrier]

Hi @ctf0,

I just checked and it works just fine.
You probably have a transition error somewhere that prevent your hooks to be properly called.

Please enable the Barba debug mode to check if you got more error logs into the console.
If not, please provide a minimal test repository.

Thanks! :wink:

[ctf0]

here is a gif of what i have

enabling debug mode displayed nothing, but here is my barba init

window.addEventListener('load', () => {
    barba.init({
        // https://barba.js.org/docs/advanced/strategies
        cacheIgnore   : false,
        debug         : true,
        prefetchIgnore: false,
        preventRunning: false,
        prevent       : ({el}) => el.classList && el.classList.contains('barba-prevent')
    })

    barba.hooks.before((data) => {
    })

    barba.hooks.after((data) => {
    })
})

[xavierfoucrier]

@ctf0 Hmm weird :thinking:
I will try with your settings asap and give a feedback.

[xavierfoucrier]

Hi @ctf0,

Again, after a bunch of tests, this is working fine from my side...
Please create a minimal reproductible test repository in order to help us debug that issue.

Waiting for your reply.
Thanks!

[ctf0]

thanx for ur help so far, am using barba with laravel but anyway will creat a repo and post it today.

thanx again.

[xavierfoucrier]

@ctf0 no problem.

Please use as less dependencies as possible to properly target the problem :wink:

[ctf0]

here is the repo https://github.com/ctf0/barba-demo

• run composer install
• run php artisan serve
• test in browser

[xavierfoucrier]

@ctf0 thanks for the repo, I will give a feedback as soon as possible! :wink:

[xavierfoucrier]

@ctf0 OK I just finish my tests, and it sounds like a bug.

As we have a meeting tomorrow with Thierry, I will expose your problem and give a feedback here.
Thanks for your patience :+1:

[ctf0]

perfect, thanx

[ctf0]

i want to add that this also happens if the pages was redirected to a page with error status ex.403, 503, etc..

[xavierfoucrier]

Hi @ctf0,

After a discussion with Thierry, as Barba is made for page transitions, this is the normal behavior since query parameters are not considered like "pages".

To fix that, you just need to add a self transition, like this:

barba.init({
  transitions: [{
    name: 'self'
  }]
});

Note that the self keyword is important.

This will tell Barba to run a transition that point to the "same" page, and you will be able to define specific enter/leave/once hooks for this transition. Historically, this feature have been added to allow user to create transitions when using the #hash part of the URL for example.

I will update the documentation accordingly to prevent future similar issues.

About 403, 503, etc. I will suggest you to check the documentation to manage those errors by yourself: https://barba.js.org/docs/advanced/recipes/#requestError.

Hope this help!
Thanks for your feedback :wink:

[ctf0]

thats good news, thanx for that.

regarding the errors pages, i mean when u press the back button, the page doesnt refresh, similar to how the qs issues.

i will test both cases with what u suggested and reply back.

thanx again.

[ctf0]

tested, all done well for the qs.

for the error, pressing back still doesnt refresh the page, is there any magic trick to get this one fixed as well ?

[xavierfoucrier]

Hi @ctf0,

Can you explain in which case you have errors happening? You should also take a look at Barba utilities in order to refresh the page with force or go methods.

Let me know :wink:

[ctf0]

i think i have a solution, basically am trying to prevent barba of handling the link that returns anything >= 400 , so am using

requestError: (trigger, action, url, response) => {
    if (action === 'click' && response.status && response.status >= 400) {
        barba.force(url)
    }

    return false
}

but when i press the back btn, nothing happens which i presume it means that barba handled that link click, so how to tell barba not to ?

[xavierfoucrier]

Yes @ctf0,

This is the actual behavior, the requestError is made for "request", so using the back button will call the history instead of doing a new one.

You should try disable the request caching in order to trigger another request call.
See https://barba.js.org/docs/advanced/strategies/#cacheIgnore

Let me know! :smiley:

[ctf0]

no difference unfortunately, when pressing back the url gets changed but no network call is made.

i believe barba doesnt currently have a solution for that, still many thanks for you help.