Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make data-turbo-confirm work with multiple submitters inside a form #564

Merged

Conversation

feliperaul
Copy link
Contributor

This pull request makes so that you can use different data-turbo-confirm on each submitter inside your form, instead of allowing only one data-confirm per form.

Problem: If you're nested inside a form, you can't use button_to because you'd end up with a nested form, which is invalid and discarded by the browser.

So, how one would accomplish a UI like the following?

image

That delete button is inside a form. A button_to there isn't allowed.

However, as @seanpdoyle greatly points here, the browser spec allows you to change the default action and method of the form on the submitter, by using formaction and formmethod attributes on the button itself.

So you could go for this:

<%= f.button formaction: destroy_all_empty_path, formmethod: :delete, class: "btn btn-default pull-right", data: { turbo_frame: :_top, turbo_confirm: "Confirm destroying all empty records?" } do %>
  <span class="when-enabled"><i class='fa fa-trash-alt' ></i> Destroy all empty</span>
  <span class="when-disabled"><i class="fa fa-spinner fa-spin"></i>  Destroying</span>
<% end %>

And you're done. Turbo will submit the form with the correct DELETE verb, to the correct destroy_all_empty_path, will automatically disable the submitter and, with the clever CSS we already know, we can show a loading state on the button.

There was only one piece missing, which this pull request addresses: the data-turbo-confirm currently doesn't work on that button, because the code only looks at the encompassing form data-turbo-confirm.

We now will look first to the data-turbo-confirm of the form submitter and show it instead of the form's if it's present.

@feliperaul
Copy link
Contributor Author

feliperaul commented Mar 25, 2023

For future readers, this worked on 7.1.0, but broke in 7.3.0 with Rails 7.

Check hotwired/turbo-rails#445 for an open PR fixing the regression.

In the meantime, a simple fix is change your <%= f.button formaction: whatever_delete_path, formmethod: :delete } do %> <%= f.button name: :whatever, formaction: whatever_delete_path, formmethod: :delete } do %>.

Simply by setting a name will prevent the default override of formmethod and it will make it work as before.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants