Hotwire Discussion

Destroy record in turbo-frame

Hi there,
I am using a turbo-frame to render a small edit view within a popover.
It works pretty well, to handle the update of it (including the redirect), as well as displaying possible errors within the form.

What doesn’t work is, when I tried to add a delete button within that popover->turbo-frame.
The delete button is just a rails_ujs link with data-method="destroy" property.

This is what happens: The deletion request itself works well. Afterwards the controller redirects to the index action, what is valid behaviour. But the redirect isn’t performed within the turbo-frame (as it is in the create&update case), but within the whole application.

I also tried to influence that behaviour using the target option in tag, but without any impact.

Of course it seems, that rails_ujs doesnt work properly with turbo - as I can see, that turbo is actually performing the redirection within its FormSubmitObserver .
And for me it seems, that rails_ujs might not be the best way of doing this anymore… is it?

So, if I’m not doing any detail wrong in my implementation, I am actually wondering, what would be the correct (new) way to submit destroy-method-requests in links, like earlier with rails_ujs, but respecting the new Turbo infrastructure?

Thanks for your help!

You’ll want to submit a form rather than click a link. The button_to method will be your friend.

If you’re rendering that link with link_to, the change will be dead easy:

# You’ll change something like this...

<%= link_to "Delete", post, data: { method: :delete } %>

# to this...

<%= button_to "Delete", post, method: :delete %>

In hindsight, it was probably a bad idea for rails ujs to hijack links to make non-GET requests. It works against the grain of HTML. A link doesn’t make something happen, it takes you somewhere. HTML gives you a separate tool to make something happen, which is a form. (See https://twitter.com/sstephenson/status/1341735693077327874 for where I originally saw this thought expressed.)

2 Likes

gr8, thanks alot, works!