Hotwire Discussion

Is Hotwire right for achieving this?

Hi,

I currently have a page with a list of items and some filters (selects, checkboxes) above. When the filters are changed, a URL with the new parameters is created, a request made and then I update the list of items using Handlebars.js

In development i’ve started to get some errors with Handlebars and as this was written quite some time ago, i’m sure there must be a better way of achieving this these days. What i’m trying to figure out is, is Hotwire a candiate for rewriting this?

Any suggestions as to how I can rewrite this functionality of my page to clean it up and remove the Handlebars.js dependency?

My app is Roller Coasters : Neil Tonge, just scroll down to the grid and filters a short way down the page.

Neil

This is certainly something you can do trivially with stimulus and turbo

Gorails did a video recently on dymanic select fields which is partway towards your slightly more complicated filtering -

Turbo streams option

I have done something similar (but using a POST request, not a GET - my URL stays the same.)

  1. I have a search form. The search for makes POST requests (or in your case, GET requests).
  2. The response is streamed back.
  3. The streamed results simply replace what was originally there on the page.

You don’t have to deal with mustache templates anymore. The same html which renders your page the first time around can be used to render it when your users apply filters.

The only thing I am uncertain is how to change your URL - since you would probably want them to change. This PR looks promising, though I haven’t read it carefully: Optionally update URLs on Frame navigation and stream responses by bfitch · Pull Request #167 · hotwired/turbo �

Turbo frames.

There is a thread which seems to do something similar here: Turbo Frames with Browser Destination/URL Replacement - #10 by jonathanbruno

Using JS

I don’t know about using javascript to do the searching for you (as per the go rails video posted above) – another option would be to retain your html form and add a simple stimulus controller to automatically submit the form whenever there is a user input change.

1 Like

Many thanks for this! I will have to take the time to read your reply in-depth and possibly give this a try out.

Thanks again!

The URL updating part could perhaps (at least for now) be solved by using a custom stimulus controller to listen to the turbo:frame-load event and then do a manual history.push(...) or something.