How to add confirm message with link_to Ruby on rails

Question

I wanted to add confirmation message on link_to function with Ruby.

= link_to 'Reset message', :action=>'reset' ,:confirm=>'Are you sure?'

Any ideas why it's not working?

Maggio

Possible duplicate of Rails - How to put a confirmation popup on a f.submit? – Schnell

This does not appear to be an exact duplicate of the nominated exemplar. The exemplar asks how to add confirmation to a form submission; this question asks how to add confirmation to a link. – Butterfield

Answer 1

First, you should verify that your layout have jquery_ujs. Best practice to do it by including it in your main application.js:

//= require jquery_ujs

Check that you included application.js in your layout:

= javascript_include_tag :application

While, in development mode, view your source html and verify jquery_ujs.js exists.

Run your server and verify your link tag has data-confirm value, for example:

<a href="/articles/1" data-confirm="Are you sure?" data-method="delete">

If all those steps are correct, everything should work!

Note: check this RailsCast http://railscasts.com/episodes/136-jquery-ajax-revised

Tachistoscope

Answer 2

I might be mistaken but you don't specify a controller along with the :action option. Have you tried the following? Assuming you have a messages resource configured in your route:

link_to 'Reset', message_path(@message), :confirm => 'Are you sure?'

EDIT: Above is deprecated. Rails 4.0 now accepts the prompt as a data attribute. See the doc here (Thanks @Ricky).

link_to 'Reset', message_path(@message), :data => {:confirm => 'Are you sure?'}

Davidoff

I think this style is deprecated. According to the rails docs, this is now a data attribute, i.e. …, data: {confirm: 'Are you sure?'} – Depreciation

@Ricky you do realize this question and almost all the answers on this page were posted on May 21, 2013? It is Sept 2014 right now. – Davidoff

Yeah. Forgive me—I'm not fully immersed in stackoverflow culture! Someone asked about this, got directed here and was confused about why :confirm didn't seem to work. 'data-confirm' works but it's not really the current 'rails way'. In other words: what's the best way for me to make a note of this? – Depreciation

@Ricky No I should've just updated my answer to begin with so I'm sorry. I must've been having a bad day or something. Answer edited with Rails 4.0 api. – Davidoff

Testing JS popups can help prevent slipping through the cracks. – Epiphragm

I'm working on an older app we have at work and it's on Rails 3.2.8. This helped me understand why my first (newer) solution wouldn't actually give me the confirmation dialog. Thanks! – Energetic

Typo. We're on Rails 3.2.18. – Energetic

Answer 3

Can't remember how this was done in Rails 3, but in Rails 4 you can simply:

<%= link_to 'Reset message', { controller: 'your_controller', action: 'reset' }, data: {confirm: 'Are you sure?'} %>

Confute

This answer helped me the most; grouping the parameters separately with { and } before the data - confirm part was what I had to do. – Annulose

Answer 4

<%= link_to 'Reset Message', data: {confirm:"Are you sure?"} %>

remember to add the path, between 'reset message' and data

Dodona

Answer 5

<%= link_to "Delete this article", article_path(article), method: :delete,
                    data: { confirm: "Are you sure you want to delete the 
                    article?"}, class: "btn btn-xs btn-danger" %>

A button link where article_path is the prefix and (article) is passing the id which is required by the method: :delete method. The later part of the codes adds a confirmation msg.

Selenaselenate

Answer 6

Try this:

= link_to 'Reset message', {:action=>'reset'}, :confirm=>'Are you sure?'

or to be more clear

= link_to('Reset message', {:action=>'reset'}, {:confirm=>'Are you sure?'})

Refer http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to

You will see that there are 3 parameters, when you are giving url as options like {:action => ..., :controller => ...}

link_to(body, url_options = {}, html_options = {})

In ruby, if the last parameter in a function call is a hash, you need not wrap it in {} characters (in other words, you can omit that in case, if the hash is the last parameter), so the code you have provided will be interpreted as a function call with only 2 parameters, 'Reset message' string and {:action=>'reset', :confirm=>'Are you sure?'} hash and the :confirm=>'Are you sure?' will be interpreted as a url_option instead of a html_option

Daw

This is new code as you suggested = link_to('Reset message', {:action=>"reset"} ,{:confirm=>"Are you sure?"}).... and this is html <a href="/manage/reset" data-confirm="Are you sure?">Reset message</a> What is 'data-confirm'....stil not opened confirm message...Thanks. – Maggio

data-* are custom data attributes introduced in HTML5 which serve as storage areas for private data. data-confirm is used by rails to make the pop up appear when the link is clicked. – Davidoff

@Tini...have you included <%= javascript_include_tag :defaults %> in the layout or page. Without that it wont work. – Daw

Answer 7

In rails 7 with Turbo, I tried the solutions above and they didn't work for me, but this worked for me.

Tip: copy the 4 methods below directly into a page of your app and test them!

<%= link_to "GET turbo link", "/",
  data: {
    turbo_method: :get,
    turbo_confirm: "Sure?"
  }
%><br>

<%= link_to "POST turbo link", "/",
  data: {
    turbo_method: :post,
    turbo_confirm: "Sure?"
  }
%>

<%= button_to "Button", "/",
  data: { turbo_confirm: "Sure?" }
%>

<%= form_with url: "/",
  data: { turbo_confirm: "Sure?" } do |f| %>

  <%= f.submit "Submit" %>
<% end %>

This info comes from this incredibly helpful answer: https://mcmap.net/q/266386/-rails-7-0-4-and-data-confirm-for-link_to-doesn-39-t-work

Astronautics

Answer 8

Somehow does not work those code only Safari browser So I was involved button...

<%= button_to('', delete_path(), method: "delete", data: { confirm: 'Are you sure?', disable_with: 'loading...' }) %>

Indoaryan

Answer 9

The UJS library, which drove the confirm functionality you're describing, is no longer enabled by default in Rails 7. That functionality has been superseded by Turbo, but there's an upgrade guide to allow them to play nicely.

Instead, I would recommend implementing a modal-based confirmation, which Turbo makes incredibly easy. GoRails has an easy tutorial on how to implement it.

One gotcha I missed: make sure to use button_to (not link_to), and don't nest the button within another form.

Cacilia

Answer 10

In Rails 7 with Turbo, the new approach is to use data_turbo_confirm:

= link_to 'Resource', resource_path(@resource), data: { turbo_confirm: 'Are you sure?' }

Loney

Answer 11

Look at your javascript_include_tag and it should work fine:

<%= link_to("Reset message", :method => :reset, :class => 'action', :confirm => 'Are you sure?') %>

Cementum

As pointed above, :confirm is now deprecated so you have to use either "data-confirm" => ... or data: { confirm: ... }. – Fetishist

Answer 12

watch this railscasts video for better understanding.

http://railscasts.com/episodes/205-unobtrusive-javascript

rails documentation for link_to helper.

http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to

Pineda

Answer 13

First, we need to understand what Js package respond to this kind of alerts in rails application. So for this, jquery_ujs package is reponsible for showing the alerts in rails.

So you must have jquery & jquery_ujs in your application.js file.

//= require jquery
//= require jquery_ujs

Now, we need to confirm, that application.js file is included in your required layout or not. By default layout file remains in application.html.erb in layout folder of views.

<%= javascript_include_tag 'application' %>

Next the link should have data-confirm & data-method attributes as

<a href="/message/1/reset" data-method="delete" data-confirm="Are you sure?">

In erb, this can be written as,

= link_to 'Reset', message_path(@message), data: {method: 'delete', confirm: 'Are you sure?'}

This should work if everything is aligned in same fashion.

Slogan