Hi! I’m currently researching Hotwire to decide if it would be a good idea to replace most of our fairly convoluted React code with Turbo + Stimulus. I’ve chosen a fairly simple view for my initial take on such a rewrite. The view consists of a table of data table headers that can be clicked to …

[image] erikbrannstrom: wrap the table and pagination in a Turbo Frame and let the search bar render only that That’s what I’d do too. I assume it looks something like this? <form data-turbo-frame="data"> <input name="query"> <button>Search</button> </form> <turbo-frame id="data"> <ta…

Thanks dan! You are correct that that would be pretty much how the structure of the HTML is. Letting Turbo render the updated data in the data-frame would already take care of updating the frame’s src attribute, but what I could do is e.g. create a Stimulus controller, attach it the the form, and l…

Ah, got you. What I had in mind was updating the URL and UI immediately when you click into the search field. My mistake. I’m not loving the MutationObserver idea tbh. Gonna give it some thought.

Here’s another thought. If the response to the form submission gives you the right URL, have you tried hooking into turbo:submit-end? Because this would, if it works (I haven’t tried it), address your concern that any change to the frame src can change the URL. It’s also simpler, since you don’t nee…

Just remembered this PR: Dispatch lifecycle events within turbo-frames by seanpdoyle · Pull Request #59 · hotwired/turbo · GitHub

@dan Interesting! I looked into it, and there are two issues. One is not really related to this though, but it seems that the visit or submit events are not emitted when the submission is triggered using JS. (I’m using the requestSubmit method) Ignoring that for a bit though, even if I would get th…

I just opened a PR that enables updating URLs on frame navigation (links and form submissions) and Turbo Stream responses: Optionally update URLs on Frame navigation and stream responses by bfitch · Pull Request #167 · hotwired/turbo · GitHub . This will hopefully provide a “first class” way to updat…

@bfitch That’s an interesting idea! I’m gonna follow the PR :+1:

Yeah, I ended up using a simple stimulus controller for this. It was more work than I wanted to do but at the same time, it’s pretty straightforward and works well. Still leverages <turbo-stream>s! Just debounces a fetch request on input and updates the URL manually.

Search-as-you-type with Turbo?

tleish February 5, 2021, 6:01pm 7

See suggestion posted here about using GET Triggering Turbo Frame with JS - #37 by tleish

Topic		Replies	Views
Triggering Turbo Frame with JS	52	42256	August 26, 2024
How to update current url with query params	13	4810	April 29, 2023
Search navigation with Turbo	6	3261	December 31, 2020
Instant search issues	10	1551	June 10, 2022
Turbo Frames with Browser Destination/URL Replacement	11	10929	May 31, 2021

Search-as-you-type with Turbo?

Related topics