11

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!

4 Answers4

9

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.

  • Thank you for your post, but for some reason, it's still not working. Still deleting the record, but not showing the confirmation message. Now I'm wondering if there is some sort of code or setting I'm missing? I've confirmed turbo-rails and stimulus-rails are in my Gemfile, and stimulus-rails is at version 1.0.4 and turbo-rails is at 1.0.1 in my Gemfile.lock. I'm not sure what else to check – Needmorebooks May 18 '22 at 06:24
  • @Needmorebooks Can you paste the generated HTML form from the button_tag in your original question? Using inspect element. Checking for the data-confirm property. – Austin Drysdale May 18 '22 at 08:58
  • Ignore Comment - posting code in original question – Needmorebooks May 20 '22 at 01:58
1

Please try the following, Its works for me:

<%= link_to 'destroy', friend, data: { turbo_method: :delete, turbo_confirm: "Are you sure?"} %>

Or:

<%= link_to 'destroy', @friend, data: { turbo_method: :delete, turbo_confirm: "Are you sure?"} %>
Tyler2P
  • 2,324
  • 26
  • 22
  • 31
1

in rails7,you can try:

<%= button_to "delete", url_path, class: "item", method: :delete, data: { turbo_confirm: 'operate.delete_confirm?'} %>
chinacheng
  • 161
  • 1
  • 5
  • +1 This approach is given [here](https://stackoverflow.com/a/75046023/5783745). For me it's the cleanest approach. – stevec Jul 31 '23 at 07:05
0

Add this code to your devise.rb, under config files:

config.navigational_formats = ['/', :html, :turbo_stream]

Then try this:

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

It should work.

Jeremy Caney
  • 7,102
  • 69
  • 48
  • 77