data-turbo-confirm on buttons doesn't seem to work

[jlecour]

Hi there,

I've been trying to have a javascript confirmation when clicking a "logout" button.

I've tried this :

<%= button_to "Sign out", logout_path, method: :delete, data: { confirm: "Are you sure?" } %>
<%= button_to "Sign out", logout_path, method: :delete, data: { turbo_confirm: "Are you sure?" } %>
<%= button_to "Sign out", logout_path, method: :delete, data: { 'turbo-confirm': "Are you sure?" } %>

but nothing works.

What am I missing?

Thanks

[DavidColby]

What version of Turbo are you using? Support for confirm was added in Turbo 7.1.

Also worth noting that some folks ended up with a bad turbo-rails version in their bundler cache that causes an old version of turbo-rails (and Turbo) to be installed by default. https://github.com/hotwired/turbo-rails/issues/297 might help.

[jlecour]

Hi @DavidColby

I'm using turbo-rails (1.0.1). I've noticed that the issue #297 and the associated PR (https://github.com/hotwired/turbo/pull/379) mention "data-turbo-confirm" on the "form" tag, but, with button_to, the attribute is set on the "button" itself.

If I manually move the attribut from the "button" to the "form", it works !

[excid3]

You need to set it on the form that button_to generates:

<%= button_to "Sign out", logout_path, method: :delete, form: { data: { turbo_confirm: "Are you sure?" } } %>

[jlecour]

Thanks, it worked

[jclusso]

I ran into this too, but I can't use separate forms for each button. I have a single form with multiple submit buttons that do different things and I have different confirmation dialogs for each one. Is there a work around for this situation.

[nickjj]

Using <%= button_to "Sign out", logout_path, method: :delete, form: { data: { turbo_confirm: "Are you sure?" } } %> works but if you have a Stimulus action set on the button how do you prevent it from executing unless the turbo_confirm was answered with an ok? I tried a bunch of different orderings of things.

At the moment the action gets executed when the confirm dialog box pops up, before the user picks ok / cancel. This prevents you from being able to have an action execute only when the user hits ok.

[overdrivemachines]

@nickjj

Using <%= button_to "Sign out", logout_path, method: :delete, form: { data: { turbo_confirm: "Are you sure?" } } %> works but if you have a Stimulus action set on the button how do you prevent it from executing unless the turbo_confirm was answered with an ok? I tried a bunch of different orderings of things.

At the moment the action gets executed when the confirm dialog box pops up, before the user picks ok / cancel. This prevents you from being able to have an action execute only when the user hits ok.

The only way to do that is to replace your current sign out button with another button that just opens a modal:

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Sign Out
</button>

Then inside your modal have your real sign out link as a "Yes" button and dismiss the modal with a "No" button:

<%= button_to "Yes", destroy_user_session_path, data: {turbo_method: :delete }, class: "btn btn-primary" %>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>