barba: Popstate events doesn't trigger transition 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 (<body>) with the data-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.

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 21 (10 by maintainers)

Commits related to this issue

fix(core): 🐛 fix transition with popstate event and query string This fix #587. — committed to barbajs/barba by xavierfoucrier a year ago
fix(core): 🐛 fix transition with popstate event and query string This fix #587. — committed to barbajs/barba by xavierfoucrier a year ago

Most upvoted comments

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 Monday to filter results by those courses that only happen on a Monday. This action will trigger two things:
- We’ll use history.replaceState to update the url to https://localhost/courses?day=monday
- An ajax request gets fired off to fetch all of the courses that take place on Monday.
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');

braican on May 16, 2022

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

pburdylo on Jan 12, 2021

Hi @pburdylo!

Thanks for your feedback. I will have a look at this soon 😉

xavierfoucrier on Jan 4, 2021