barba
barba copied to clipboard
barbajs
Back forward button does not work correctly with query string
Hi. Barba version: lastest release version Browser: firefox and Chrome (Latest versions)
How I added barba: I have wrapped body of page (
) with thedata-barba="wrapper" and main content of pages (div) with the data-barba="container" data-barba-namespace="home" and content for different pages are changing properly.
Scenario: When I want to move between screens in a page with pagination items, back/forward button does not change content of page. For example:
- http://localhost:8080/ -> main page, I click a button in this page to send a request to server to open page (2)
- http://localhost:8080/products?page=1 -> a simple page with paginated items with page=1
- https://localhost:8080/products?page=2 -> the above simple page with paginated items with page=2
For the first time when I click step (1)-(3), I send a request to the server to fetch data and everything works. Also, when I click on the buttons (1),(2) in the paginated page (step 2 and 3), content of page changes.
Error: Now I want to use back/forward button to move between steps (1), (2) and (3). moving between (1) and (2) works, but moving between (2) and (3) does not work (only URL of page changes and content of shown paginated items does not change).
what is the problem? When I use jquery-pjax library, everything woks fine by back/forward buttons. I used the barba.js, because it says that it uses pjax and history API that is something I need. I'm looking for a solution to send request to the server or use client side only to move between pages.
Hi @BigGitWorld,
Thanks for opening the issue. Please provide a minimum reproductible test repository for that specific case.
Regards :wink:
Dear @xavierfoucrier I'm sorry really for late answer. Please excuse me because I'm very busy. But I will provide a simple example as soon as possible. so please don't close the issue.
Hi @BigGitWorld,
What about your test repository? Thanks for the feedback!
I think I can provide an example, I stumbled the same behavior.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body data-barba="wrapper">
<div data-barba="container">
<a href="?step=1">step 1</a><br>
<a href="?step=2">step 2</a><br>
<a href="?step=3">step 3</a><br>
<a href="?step=4">step 4</a><br>
</div>
<script src="https://unpkg.com/@barba/core"></script>
<script>
barba.init({
transitions: [
{
name: 'generic',
enter() {
console.log('generic enter');
},
}
]
})
</script>
</body>
</html>
Navigating through the links works fine (a few 'enter' logs). When I click back and/or forward button I don't get any log, seems nothing changes except the url.
Hi @pburdylo!
Thanks for your feedback. I will have a look at this soon :wink:
Hi @pburdylo @BigGitWorld,
Just to let you know, this is a duplicate of https://github.com/barbajs/barba/issues/532 .. :smiley:
Barba is made for page transitions, this is the normal behavior since query parameters are not considered as "pages".
But anyway, it looks a little bit buggy after a bunch of tests.
Here is a quick workaround that uses the magic self transition:
barba.init({
transitions: [{
name: 'generic',
enter() {
console.log('[generic] enter');
},
}, {
name: 'self',
enter() {
console.log('[self] enter');
},
}],
});
There are disparities when only using the generic or self transition alone.
I keep the issue opened in order to discuss it with @thierrymichel.
My problem is that the transition works with query params when using links ('a href') but doesn't when using back/forward.
BTW – are transition names ('generic', 'self') important or are they only informational and can be anything? I assumed the latter, but then your example shouldn't work (no difference between generic and self but for the name), which made me reconsider...
@pburdylo self is a magic keyword, see https://barba.js.org/docs/advanced/transitions/#Self.
still, the situation is confusing.
- when initializing barba with only 'generic' transition the behavior is (a) transition on links leading to the same page with different query args (b) reload on link to the same page with the same query args (c) no transition / reload when using BACK/FWD buttons (only URL is changed)
- when initializing barba with both 'generic' and 'self' transitions the behavior I get is (a) generic transition on links leading to the same page with different query args (b) self transition on link to the same page with the same query args (c) self transition when using BACK/FWD buttons
I expect same behavior when using BACK/FWD or clicking on a link when the clicked link is the same as the link in browser history stack. What do you think?
PS – thanks for staying in touch, great job with the lib :)
three more cents:
- a workaround in a simple case is to have two transitions (generic & self) reusing the same code
- not considering query args as page changes is a bit over restricting IMO. (a) paged product list as in original GreatGitWorld post is a good example (b) my real case is language change (c) in general – standard wordpress configuration gets you xxx.com/?page_id=ID... I guess the list could be easily extended.
- is it possible to have a few 'self' transitions with custom rules? My fast experiment shows that 'custom' property is ignored on self transition. And my intuition says that transition names should be unique. That would be pretty standard situation for me to have a specific animation for different cases, like reload of home page and loading next product list page, etc.
Hi @pburdylo,
Can you take the time to build a minimal reproductible test repository? This way Thierry will be able to have a look when coming back to this issue :wink:
I already noticed that this is a little bit buggy. Great thanks!
scenario 1 – just a plain index.html file with the code I pasted above https://github.com/barbajs/barba/issues/587#issuecomment-754031478
scenario 2 – the same file with barba.init replaced with the code you pasted above https://github.com/barbajs/barba/issues/587#issuecomment-757378340
Hi @pburdylo,
Sorry but for now I haven't found the time to dive into this bug.. Thanks for your patience and have a nice day! :sun_with_face:
Hi, I'm here because the same issues with back/forward buttons occured also to me, and it seems that the bug hasn't been resolved yet.
I experienced the problem while filtering the page by using query params.
My current implementation of barba (2.9.7) init looks like below:
barba.init({
debug: true,
prefetchIgnore: true,
cacheIgnore: true,
transitions: [
{
name: 'self',
before(data) {
console.log('before self', data);
},
enter() {
console.log('enter self');
},
after() {
console.log('after self');
}
}
],
});
barba.hooks.before(data => {
console.log('before hook');
});
barba.hooks.enter(() => {
console.log('enter hook');
});
barba.hooks.after(() => {
console.log('after hook');
});
There is one scenario, where everything looks to be working fine:
- http://localhost:3000/reports - opens a page with list of items
- http://localhost:3000/reports?document-type=type-1 - send request and filter documents by type 1
Now, after clicking back button, all hooks getting fired and page contents reloads to previous state without query params as expected.
Another scenario:
- http://localhost:3000/reports - opens a page with list of items
- http://localhost:3000/reports?document-type=type-1 - send request and filter documents by type 1
- http://localhost:3000/reports?document-type=type-2 - send request and filter documents by type 2
Now, after clicking back button, "before" hooks gets fired and barba error is displayed in console. URL in the browser change to the previous one, but content of the page do not update.
@xavierfoucrier is it any chance for you to find the time to dive into this bug, please?
What could be causing the error at @barba/core/dist/barba.umd.js shown on the screenshot above?
@martinkosmela I will. I am currently in vacation mode with my family. Thanks for your patience, and again, sorry for the delay.
@xavierfoucrier I hope you have had a great time vacationing with your family.
Did you have any chance to take a look on this issue since then?
@martinkosmela I am currently on a rush period right now, but, we take time with Thierry to discuss on current bugs and opened issues.
This one is assign to me, and I will take the appropriate time to check it as soon as possible. I also have code example from @pburdylo to debug.
Thanks again for your patience.
I'm also seeing a similar issue where I'm getting the same TypeError: Cannot read properties of undefined (reading 'undefined') error as @martinkosmela upon trying to use the back button to return to a page that contains a query string.
I have an application that is fetching and rendering records from an API with filter controls available to the user. When a user interacts with a filter, I'm modifying the current history state with history.replaceState to add the active filters to the url via a query string and triggering another request to the API to fetch the filtered results. An example flow might look like this:
- A user lands on the initial page at
https://localhost/courses - In the filter UI, they'll click on
Mondayto filter results by those courses that only happen on a Monday. This action will trigger two things:- We'll use
history.replaceStateto update the url tohttps://localhost/courses?day=monday - An ajax request gets fired off to fetch all of the courses that take place on Monday.
- We'll use
- The user clicks on a returned course to visit that course's detail page.
- They then click on the browser's back button to get back to the filtered view of courses.
In my case, this last step triggers the error - rather than navigating back to the previous url (including the query string), the page does not update and I see the following error in my console:
I believe this is related to the use of history.replaceState to modify the url before the user navigates; it seems that when I programmatically update the current history entry with that function, Barba doesn't receive that change which then invalidates its own internal history state.
I was able to fix my issue by manually pushing a new history item to Barba's internal history state when I update the browser's native history entry:
history.replaceState({}, '', `${base}?${queryString}`);
// Adding this line fixed my issue.
barba.history.add(`${base}?${queryString}`, 'barba');
Any news on this ? I just ran into this issue also. It's been over 2 years since the initial bug report 🫠
As @braican stated it seems to be related to the use of history.replaceState(). history.pushState() however works fine. The solution using barba.history.add(); he mentioned isn't working for me I still get an error, also I do not want to add to the history state, juste change the url to reflect the choices on the current page.
This is all it takes to produce the error.
const url = new URL(window.location.href);
url.searchParams.set("category", category);
history.replaceState({}, "", url);
The back button works but as soon as I go forward to an url that was modified I get this error
Using @barba/core 2.9.7
