# Button\_to not showing the data-confirm?

**URL:** <https://discuss.hotwired.dev/t/button-to-not-showing-the-data-confirm/2046>\
**Category:** General\
**Created:** [January 19, 2021, 4:48am UTC](https://discuss.hotwired.dev/t/button-to-not-showing-the-data-confirm/2046 "2021-01-19T04:48:55Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![dazza](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/dazza/32/1439_2.png) [@dazza](https://discuss.hotwired.dev/u/dazza)\
**Post date:** [January 19, 2021, 4:48am UTC](https://discuss.hotwired.dev/t/button-to-not-showing-the-data-confirm/2046/1 "2021-01-19T04:48:55Z")

</div>

I’m trying to have a confirmation dialog box show with my `button_to`, but it doesn’t seem to want to show. The code is being fired but the confirmation isn’t showing. I’ve tried adding it to the button and the form but neither are showing the `data-confirm` dialog. Can anyone help me work out what’s happening?

Thanks

```
<%= button_to delete_hamper_order_path(hamperorder: hamperorder.id, hamper: hamperorder.hamper), method: :post, class: "bg-transparent hover:bg-red-500 font-semibold text-red-500 hover:text-white text-sm py-1 px-2 border border-red-500 hover:border-white rounded my-2 w-full", data: {confirm: "This will permanently delete this hamper. Are you sure you wish to continue?"} do %>
    Delete Hamper
  <% end %>
```

---

<div class="post-metadata">

**Author:** ![jacobdaddario](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/jacobdaddario/32/1183_2.png) [@jacobdaddario](https://discuss.hotwired.dev/u/jacobdaddario)\
**Post date:** [January 19, 2021, 5:50am UTC](https://discuss.hotwired.dev/t/button-to-not-showing-the-data-confirm/2046/2 "2021-01-19T05:50:06Z")

</div>

Hey @dazza !

I believe one of the things that the Turbo install script does is remove `rails-ujs`. This is a fairly old solution that was added to Rails to help simplify some of the simple JS that people ran into. This includes the `data-confirm` behavior, as well as a few other behaviors such as `disable-with` and the use of `method` on `link_to`.

That said, you should be able to replicate this behavior easily with Stimulus. [Looking at the source for data-confirm](https://github.com/rails/rails/blob/main/actionview/app/assets/javascripts/rails-ujs/features/confirm.coffee), it looks like you could wrap the behavior in a Stimulus controller like this:

```auto
// javascripts/controllers/confirmation_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  static values = { message: String };

  confirm(event) {
    if (!(window.confirm(this.messageValue))) {
      event.preventDefault()
    };
  };
}

```

```auto
<!-- app/views/some_resource/_form.html.erb -->
<%= form_with model: @some_resource, data: { controller: "confirmation", "message-value": "Are you sure?", action: "submit->confirmation#confirm" } do %>
  <!-- Form goes here -->
<% end %>

```

This is totally untested code that I just hacked together, so please do give it a test in your app. I haven’t used this controller in particular, but I wrote a controller for `disable-with`, and it’s worked fairly well so far. I’ve found it’s not been too hard to replicate `rails-ujs` behavior so far using the great Stimulus API.

EDIT: @dazza I’ve now tested this code as part of [this conversation.](https://github.com/hotwired/stimulus-rails/pull/24#issuecomment-763851711) I’ve updated the code snippet accordingly.

DOUBLE EDIT: I’m sharing [this link to a relevant GitHub issue for reference by future readers of this thread.](https://github.com/hotwired/stimulus-rails/pull/29)

---

<div class="post-metadata">

**Author:** ![dazza](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/dazza/32/1439_2.png) [@dazza](https://discuss.hotwired.dev/u/dazza)\
**Post date:** [January 19, 2021, 8:36am UTC](https://discuss.hotwired.dev/t/button-to-not-showing-the-data-confirm/2046/3 "2021-01-19T08:36:02Z")

</div>

Thanks so much! That makes total sense … I’ll just add a warning to the webpage for the moment 😉

---

<div class="post-metadata">

**Author:** ![daniele](https://avatars.discourse-cdn.com/v4/letter/d/dfb087/32.png) [@daniele](https://discuss.hotwired.dev/u/daniele)\
**Post date:** [January 24, 2021, 8:20pm UTC](https://discuss.hotwired.dev/t/button-to-not-showing-the-data-confirm/2046/4 "2021-01-24T20:20:53Z")

</div>

@jacobdaddario thaks for the idea! I did some tests and I find out that `preventDefault` is not enought to stop the execution, I had to add `stopImmediatePropagation` too:

import { Controller } from “stimulus”

```
export default class extends Controller {
  static values = { confirmMessage: String };

  confirm(event) {
    if (!(window.confirm(this.confirmMessageValue))) {
      event.preventDefault();
      event.stopImmediatePropagation();
    };
  };
}

```

Hope it helps!

/cc @dazza

---

<div class="post-metadata">

**Author:** ![jacobdaddario](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/jacobdaddario/32/1183_2.png) [@jacobdaddario](https://discuss.hotwired.dev/u/jacobdaddario)\
**Post date:** [January 24, 2021, 10:50pm UTC](https://discuss.hotwired.dev/t/button-to-not-showing-the-data-confirm/2046/5 "2021-01-24T22:50:59Z")

</div>

This is great! I wasn’t aware that this method existed. Reading the JS docs though, I’m concerned that the order that controllers are installed will create some problems. In the PR in `stimulus-rails`, I’ve actually considered dispatching a custom event instead. It’s definitely a tricky situation.

---

<div class="post-metadata">

**Author:** ![rainerborene](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/rainerborene/32/1520_2.png) [@rainerborene](https://discuss.hotwired.dev/u/rainerborene)\
**Post date:** [January 25, 2021, 7:14pm UTC](https://discuss.hotwired.dev/t/button-to-not-showing-the-data-confirm/2046/6 "2021-01-25T19:14:44Z")

</div>

Well, if you have lots of forms in your web application that could be a lot of work. Instead you can do it globally using events.

```javascript
document.addEventListener("turbo:submit-start", (event) => {
  confirmSubmission(event).then(() => {
    // show progress bar and set submit state here.
    // this block is optional.
  })
})

function confirmSubmission(event) {
  const button = event.target.querySelector("[data-confirm]")
  const message = button?.dataset?.confirm

  return new Promise(resolve => {
    if (!message || confirm(message)) {
      resolve()
    } else {
      event.detail.formSubmission.stop()
      event.preventDefault()
      event.stopImmediatePropagation()
    }
  })
}

```

---

<div class="post-metadata">

**Author:** ![daniele](https://avatars.discourse-cdn.com/v4/letter/d/dfb087/32.png) [@daniele](https://discuss.hotwired.dev/u/daniele)\
**Post date:** [January 25, 2021, 10:19pm UTC](https://discuss.hotwired.dev/t/button-to-not-showing-the-data-confirm/2046/7 "2021-01-25T22:19:17Z")

</div>

Great! Thank you very much 🙂

---

<div class="post-metadata">

**Author:** ![BKSpurgeon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/bkspurgeon/32/1483_2.png) [@BKSpurgeon](https://discuss.hotwired.dev/u/BKSpurgeon)\
**Post date:** [August 12, 2022, 4:39am UTC](https://discuss.hotwired.dev/t/button-to-not-showing-the-data-confirm/2046/8 "2022-08-12T04:39:18Z")

</div>

For anyone finding this thread:

- the problem has largely been solved now by adding: `data-turbo-confirm` to the form.
- A [merged PR](https://github.com/hotwired/turbo/pull/379/files) seeks to add `data-turbo-confirm` to the button elements as well.
- a further PR essential allows for [customised confirmation modals](https://github.com/hotwired/turbo/pull/525) (rather than the browser’s modals).