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.

I apologise for the long delay on this. I am ready to actually start trying to update this.

Is there some documentation or an example somewhere of how to allow the form to get the results grid to update but using Turbo?

I really do think this is the way I want to go but struggling to actually start. I just need a push i think.

For now i’m not going to make it update live on input changes, but after clicking on a new submit button in the filter form. I need to be able to click the submit and update the results grid.

UPDATE:

Ok, I’ve managed to get a simple version working. A form with a simple select field that successfully updates the grid. Actually easier than I thought.

A few questions:

  1. I have a select field with two options. I want to add a third option of “All”. When “All” is selected, I need the parameter to not be submitted. My apps logic will then see that `params[:material]’ is not set and therefore will not filter it down

  2. How could I get the pagination linked into this? as the pagination is outside the form.

  3. Some inputs will need the parameter being sent to be tweaked or modified in some ways. How can that be done and how to do I send the changes?

Thanks!

I’ve made a bit more progress on this. I now have a number of filter inputs and changing them does update the grid successfully which is great!

My main problem is that, whether or not someone has changed a filter, a GET parameter for each input/select is always sent as part of the form submission.

I need it to work like:

If a user sets a selectbox back to “All”, or no items in a checkbox set are checked then, those parameters are just not sent. Is this possible?

I managed this in the old version as the form items were not actually in a form tag like they are now.

How can I achieve this effect? Only submitting input fields that have a changed/no default value?

@Konstantinos_Stratis I’ve come across “data-turbo-action=“advance”” that appears to work for the URL updating part.

Just trying to figure out how to add that to all the links that make up my Kaminari pagination output.

I know, no one has replied to my followup messages (which is fine by the way!) but as previous replies did help me out, I only thought it was right to follow up.

I have successfully managed to rewrite the entirety of my filtering form using both Turbo and Stimulus.

Feel free to check ti out at the link in my original post. I’m pretty pleased with it. Many thanks for all your help!

Neil