Hotwire Discussion

Manually setting history state

Hey!

I have an index page which is filterable by typing into a search input. 500ms after the user stopped typing, the app fetches an updated records table from the server like this:

$.get(`${path}.js?${$.param(searchParams)}`)

Rails then responds with some js which replaces the table while the search input isn’t changed so the browser doesn’t lose focus on the field. I tried doing this with a regular Turbolinks.visit call, but the search field would lose focus with that, iirc. So in order to make the resulting page bookmarkable, I’m doing this:

Turbolinks.controller.pushHistoryWithLocationAndRestorationIdentifier(`${path}?${$.param(searchParams)}`, Turbolinks.uuid())

And that worked like a charm. Now with Turbo, I couldn’t find anything like this. I found How to use Turbo.visit() and target a specific frame? - #2 by javan and that works for replacing the results, but obviously the url wouldn’t change automagically.

So, is there any option I can manually change the url/push that new state in a Turbo-friendly way? I’m also open for alternatives to this manual hack, I just want live-updates on typing without losing focus on the field and url updates. :slight_smile:

Thanks! Tobias

Funny enough I was just working on something like this. I wanted search results to be reflected in the URL so that they can be bookmarked or shared.

My solution was to just include the following right after I update the frame’s src attribute.

history.pushState({}, '', newUrl)

Does that work for you?

1 Like

Hey! This correctly adds the history state, but navigating back and forth with the browser buttons doesn’t work with this. The URL changes, but the content doesn’t.

I, too am having the same issue currently @tbuehlmann . Did you ever find a way around this?

The solution posted in this topic might lead you the right direction: