Rails 7 I can't get the confirmation message to show before record is successfully deleted

Question

In my Rails 7 application, I'm trying to show a confirmation message when the user presses a "Delete" button. However, when the button is pressed, it's deleting the record straight away without showing the confirmation prompt. I'm using devise to create the routes - I've been trying to look into this and it seems like there was some kind of broken functionality with devise and/or Turbo that is breaking the confirmation dialog box?

Here is what I started with:

<%= button_to 'Delete', @friend, method: :delete, data: { confirm: 'Are you sure?' }, class: "btn btn-danger mx-1" %>

This is deleting the record just fine, it's just not showing the confirmation. Here are some other lines I've tried that I believe was supposed to just work since Turbo is supposed to come installed with Rails 7 if I understand correctly:

<%= button_to 'Delete', @friend, method: :delete, data: {turbo_method: :delete, turbo_confirm: 'Are you sure?'}, class: "btn btn-danger mx-1" %>

<%= button_to 'Delete', @friend, method: :delete, data: { turbo_confirm: 'Are you sure?' }, class: "btn btn-danger mx-1" %>

I then tried to create a Stimulus class named friend_controller.js and put it in the friends/app/controllers folder:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  delete(event) {
    let confirmed = confirm("Are you sure?")

    if (!confirmed) {
      event.preventDefault()
    }
  }
}

And updated my button accordingly:

<div class="d-flex" data-controller="friends">
    <%= button_to "Delete", @friend, method: :delete, data: { action: "click->friend#delete" } %>
</div>

Every option is deleting the record perfectly, just not showing the confirmation message.

I'm trying to follow a YouTube tutorial to build this as my first Ruby app, but that video is from 2020 and so was using Rails 6. I'm in a college program to learn software development, so I thought I'd challenge myself to also update it to the current version and, well, I'm challenged. This is the last thing I need to figure out before I'm done with this tutorial.

In the other questions I've seen they haven't needed to post the Gemfile or the generated devise friends_controller.rb, but if I need to post them here I will, just let me know.

Thank you very much for any help you can provide!

Edit: -----

Here is what I think was asked for (the generated HTML). I got this by opening up my page, right-clicking, choosing "Inspect" and finding the HTML section for the button in question:

<form class="button_to" method="post" action="/friends/1">
  <input type="hidden" name="_method" value="delete" autocomplete="off">
  <button data-action="click->friend#delete" class="btn btn-danger mx-1" type="submit">Delete</button>
  <input type="hidden" name="authenticity_token" value="(long line of random letters)" autocomplete="off">
</form>

I removed the actual authenticity token because I think those are supposed to be kept secret. I know it's just a sample project but I'm not sure if that is something unique to my computer. Thank you for being patient with me while I'm learning!

Answer 1

I would try this:

<%= button_to 'Delete', @friend, method: :delete, form: { data: { turbo_confirm: 'Are you sure?' } }, class: "btn btn-danger mx-1" %>

Because you are using Turbo, you need to add the data-turbo-confirm to the form itself, unlike in rails-ujs. Which you would add it to the button.

Keep in mind button_to generated a form unlike link_to.

Answer 2

in rails7，you can try：

<%= button_to "delete", url_path, class: "item", method: :delete, data: { turbo_confirm: 'operate.delete_confirm?'} %>