# Pairing data-action with data-confirm in rails?

**URL:** <https://discuss.hotwired.dev/t/pairing-data-action-with-data-confirm-in-rails/749>\
**Category:** General\
**Created:** [April 16, 2019, 6:16pm UTC](https://discuss.hotwired.dev/t/pairing-data-action-with-data-confirm-in-rails/749 "2019-04-16T18:16:00Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![skatkov](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/skatkov/32/710_2.png) [@skatkov](https://discuss.hotwired.dev/u/skatkov)\
**Post date:** [April 16, 2019, 6:16pm UTC](https://discuss.hotwired.dev/t/pairing-data-action-with-data-confirm-in-rails/749/1 "2019-04-16T18:16:00Z")

</div>

I’m using rails with stimulus-js and rails has a built-in ‘data-confirm’ parameter for `form_tag`. I’m having issue pairing those two together…

I have a list of products that clients can ‘remove’, I do it through ajax, but I also use data-confirm, since it’s a destructive action.

Example code:

```auto
<script src="https://unpkg.com/stimulus/dist/stimulus.umd.js"></script>

<script>
  (() => {
    const application = Stimulus.Application.start()

    application.register("product-listing", class extends Stimulus.Controller {
      static get targets() {
        return ["product"]
      }

      remove() {
        this.productTarget.classList.add('is-invisible')
      }
    })
  })()
</script>

<div class='box' data-controller='product-listing' data-target='product'>
        <div class="level-item" >
              <%= form_tag "#{store_path(store)}/products/#{product[0]}", 'data-action':'product-listing#remove', method: :delete, remote: true, 'data-confirm': "This will remove product from store. You want to continue?" do |f| %>
              <%= button_tag(class: 'level-item button is-small is-danger is-outlined', type: 'submit', data: { disable_with: '<span>Removing...</span>'.html_safe}) do %>
              <span class='icon'>
                <i class='fa fa-trash-o'></i>
              </span>
              <span> Remove </span>
              <% end %>
              <% end %>
         </div>
</div>

```

The problem is, that Product disappears before user confirms his action.

I’m probably missing something trivial here. But I’ve been through google and documentation couple of times and not sure how to solve this correctly.

Maybe I should hook up to ajax call, not to the click?

---

<div class="post-metadata">

**Author:** ![kaspermeyer](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/kaspermeyer/32/483_2.png) [@kaspermeyer](https://discuss.hotwired.dev/u/kaspermeyer)\
**Post date:** [April 16, 2019, 8:27pm UTC](https://discuss.hotwired.dev/t/pairing-data-action-with-data-confirm-in-rails/749/2 "2019-04-16T20:27:19Z")

</div>

Usually, the `data-confirm` attribute is attached to the button or link, not the form itself. Have you tried that? It should prevent the form from submitting (and your action from being called) until the user has confirmed.

---

<div class="post-metadata">

**Author:** ![skatkov](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/skatkov/32/710_2.png) [@skatkov](https://discuss.hotwired.dev/u/skatkov)\
**Post date:** [April 17, 2019, 6:32am UTC](https://discuss.hotwired.dev/t/pairing-data-action-with-data-confirm-in-rails/749/3 "2019-04-17T06:32:47Z")

</div>

Hey @kaspermeyer

Thanks for your suggestion. I actually solved this already, I got an idea based on your answer in another thread:

> [@Stimulus and Rails UJS](https://discuss.hotwired.dev/t/stimulus-and-rails-ujs/587/7):
>
> You can have an action that triggers on ajax success like so: \<form data-action="ajax:success-\>controller-name#actionName"\> A complete list of ajax lifecycle events can be found here: [https://edgeguides.rubyonrails.org/working\_with\_javascript\_in\_rails.html#rails-ujs-event-handlers](https://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html#rails-ujs-event-handlers)

Now I remove form from page only after ‘ajax:success’ happened. And that completely solves my issue!