How do I put a delete link within an update form? - ruby-on-rails

I have a remote form for updating a 'Point' model. It's a pretty ordinary form with a submit button.
However, I'd like to also include a 'remove' button beside the 'update' button.
Unfortunately, there is a problem with this. When I click on the 'update' button it ends up deleting the entry - the delete link seems to hijack the update form.
EDIT: I think I know why the update button is deleting. When I add the delete link to the form it adds this input:
<input name="_method" type="hidden" value="delete">
Regardless of whichever button I press this "_method" param is being picked up!
Now, I know that I can just position the remove button outwith the form element but in this case I'm not allowed to.
I guess the remove button could just be another update submit button, but with an extra :remove_this parameter.
However, something about that doesn't feel right. Any ideas?

Another curious workaround that does not require javascript, is to put the delete-form outside the update-form but leave a <label for="theSubmitButtonInTheDeleteForm"> inside the update form.
The update-form will continue to work as expected, but clicking the label will submit the delete-form.
Then just style the label as a button.

I would recommend using a link rather than a button and style it like a button:
link_to("Remove", resource_url, method: :delete, class: "delete_button")

In Rails 3 the recommended way to submit forms using Ajax is to use form_for in combination with UJS rather than remote_form_for. Please see this railscasts episode for more info.
Then when the document is ready/loaded, you add a click listener to each of the buttons, and act accordingly:
$('#id_of_delete_button').click(function() {
// serialize the form and submit it to the delete action
});
$('#id_of_update_button').click(function() {
// serialize the form and submit it to the update action
});
The given code snippet is in jQuery, but you can use Prototype in a similar way as well.

Basically, the only difference between the 'update form' and a 'delete form' is the presence of <input name="_method" type="hidden" value="delete">
So here's the workaround I came up with:
<%= form.submit 'Update', :id => "point_#{point.id}_submit", :style => "" %>
<%= form.submit 'Remove', :confirm => 'Are you sure?', :id => "point_#{point.id}_remove" %>
remove_button.observe('click', function(event)
{
form_element.insert('<input name="_method" type="hidden" value="delete">');
}

= f.button :submit, class: "btn-primary"
= link_to "Delete", f.object, class: 'btn btn-default', data: {method: 'DELETE'}
Delete link is styled with Bootstrap to look like a button. jquery-ujs hijacks clicks on links with data-method attribute and sends them with custom HTTP method.

You could do this:
<%= button_to 'Delete', point_path(point), :method => 'delete', :confirm => 'Are you sure?' %>

you would make a link_to 'del', Variable, :confirm => 'Are you sure?', :method => :delete
The :method => :delete will call the destroy part of your controller.

Related

:confirm in rails not working

I just started coding in ruby on rails and I've been following a guide which is using a more outdated version of rails than I am using. I am using 3.2.12
This is my code:
<%= button_to 'Destroy', product, :method => "delete", :confirm => 'Are you sure?' %>
From what I understand, these are symbols that are passed to rails, which is then converted to either an html or javascript action that then pops up the message box and deletes the object if applicable. The above code destroys the object, but it does not pop up the confirm box. Why is this? Also, I had the above as the following at first:
<%= link_to 'Destroy', product, :method => "delete", :confirm => 'Are you sure?' %>
The confirm box is not popping up under any circumstance, using link_to or button_to. Below is the html rendered when inspected using Chrome's inspector. jquery and jquery-ujs are loaded into the as well, so I'm not sure where to go from here.
<input name="_method" type="hidden" value="delete">
<input data-confirm="Are you sureeee?" type="submit" value="Destroy">
<input name="authenticity_token" type="hidden" value="Q2xicqELHYHtrwarbtPBe5PT2bZgWV5C+JdcReJI8ig=">
Thanks!
I had to add my confirm attribute inside the data attribute to get it to work. I am using rails 4 with bootstrap. I hope this helps someone else who has that issue.
link_to 'Delete', #rule, method: :delete, data: { confirm: 'Are you sure you want to delete this alert?' }
This relies on jQuery, ensure you have the following:
in your Gemfile
group :assets do
gem 'jquery-rails'
end
in your assets/javascripts/application.js file, before the line //= require_tree .
//= require jquery
//= require jquery_ujs
The difference between link_to and button_to is the HTTP verb. link_to issues GET requests and button_to issues POST requests. With the RESTful routing, the delete action is a POST request to controller/id. If you issue a GET to controller/id, it is dispatched to the show action.
AIUI, link_to with anything other than the GET verb is a Bad Idea. One, right-clicks don't preserve the verb. Two, you don't want bots crawling the page to follow the link and thereby trigger the delete action even though you probably need to be logged in to actually modify the database.
Feel pretty dumb, but adblock was blocking the message box. Sorry about that. All is well now, I just disabled adblock.
If you want to delete something with confirmation box in rails 7, you may try this one:
With button_to (more prefered IMHO):
<%= button_to 'Destroy', product, method: :delete,
form: {data: {turbo_confirm: 'Are you sure?'}} %>
This will render an HTML form tag which sends a POST request on submit (after confirmation) but with a hidden _method attribute with 'delete' value. So that rails will treat this request as if it has a DELETE method.
It will be routed to products#destroy (or whatever your routes are saying).
With link_to:
<%= link_to 'Destroy', product,
data: {turbo_method: :delete, turbo_confirm: 'Sure?'} %>
This will render a simple a tag with data-turbo-method and data-turbo-confirm attributes. Clicking this link will trigger a confirmation box and if "OK" is chosed, a real DELETE request will be sent.
If you want to end destroy action in your controller with a redirect_to, some browsers will redirect to a new location with DELETE method (causing errors), so make sure to add status: :see_other parameter, like the guides suggests.
I have a pop-up blocker running in Chrome. I just whitelisted http://localhost:3000 and it worked for me.

html text in twitter bootstrap modal data attributes parameter

This comes from Twitter Bootstrap modal rails delete button not working
How can I pass html code to show in Twitter Bootstrap modal? Here is the link
<%= link_to t('delete'), post, method: :delete, confirm: t('delete_this_question'), 'data-my-message' => raw(post.text), class: 'label' %>
post.text is HTML code. Now it shows link in bad format.
Thanks
I think the problem here is probably your use of "raw". If you use raw html inside your link_to helper it will probably mess up the link's quoting. For example you might get something like this:
world" ...>
And that would mess up your link tag. I'm not sure how the rest of your view fits together but I think you should just be able to drop the 'raw' method:
<%= link_to t('delete'), post, method: :delete, confirm: t('delete_this_question'), 'data-my-message' => post.text, class: 'label' %>

How to make a button work as a link in erb?

<%= link_to 'New Post', new_post_path %>
This produces link to new_post_path. Previously i used <input type="submit" class="new" name="Addlist" value="Add New" /> which resembled like a button. So how can i make the link look like button in erb?
Just to throw another option out there since I had a scenario where the button_to option didn't work. This looks kind of similar to that.
<%= link_to '<button type="button">New Post</button>'.html_safe, new_post_path %>
What I basically wanted is a button that doesn't turn into a submit, since I have multiple buttons on the page that aren't related to a form, and I really just want it to just go to another page.
Take a look at button_to. In summary it will be simmilar to this:
<%= button_to "New Post", { :action => "new" }, :method => :get %>
Although be aware, this method accepts the :method and :confirm modifiers described in the link_to documentation. If no :method modifier is given, it will default to performing a POST operation. You can also disable the button by passing :disabled => true in html_options. If you are using RESTful routes, you can pass the :method to change the HTTP verb used to submit the form.
#Ryan's answer is good but sadly fails html validation http://validator.w3.org/
error: The element button must not appear as a descendant of the a element.
Why not simply apply a (CSS) class to your link and make it appear as a button.
erb:
<%= link_to "Button Text", new_post_path, class: 'button' %>
produces (valid & semantic) HTML:
<a class="button" href="/post/new">Button Text</a>
which you can then style to look like a button.
Example: http://jsfiddle.net/nelsonic/FQK9M/7/

Rails :confirm | How to select “Cancel” by default in confirm box?

The confirm-box message appears like it should when the link is clicked.
<%= link_to 'Close Account',
#profile,
:confirm => "Are you sure?",
:method => :delete
%>
When the confirm-box appears, the "OK" button is selected by default; I want the "Cancel" button selected by default, so that if the user accidentally presses enter then the profile record will be safe and will not be deleted.
Is it possible to have the "Cancel" button selected?
The confirm box is generated by Javascript, using an attribute selector in Rails (note data-confirm) on the element. Unfortunately, this box is generated by the browser, so there's no real direct control over it. If you're using the latest version of Rails, I suggest looking into jQuery UI, and using the dialog library. Here, you can make custom confirmations, and maybe even an attribute binding such as data-uiconfirm. Which would look like this:
<%= link_to 'Close Account',
#profile,
:data =>
{:uiconfirm => "Are you sure?"},
:method => :delete
%>
And the attribute binding like so:
$('[data-uiconfirm]').dialog(....)
No. This is a browser implemented thing, and there's no way to change the selected box. If you want to get around this, you would have to make your own popup code where you could change the selection.

Rails 3 data errors with link_to

I've been searching for a while for a solution, but haven't been able to find out what is wrong with my code.
I'm trying to delete an item using an ajax call on an event page, but it doesn't seem to work.
<%= link_to 'X', { :controller => 'items', :action => 'destroy', :id => item.id }, :method => :delete, :confirm => 'Are you sure you want to delete this item?', :remote => true %>
<a rel="nofollow" data-method="delete" data-confirm="Are you sure you want to delete this item?" href="/items/83">X</a>
I believe everything looks right, however, the data attributes don't seem to work. No confirmation occurs when I click this and instead it calls the 'show' action for the controller, so the data-method is not working either.
The weirdest part is that I something else on the page that generates the confirmation messages.
<%= link_to image_tag("trashcan.png"), #event, :confirm => 'Are you sure you want to delete this event?', :method => :delete %>
<a rel="nofollow" data-method="delete" data-confirm="Are you sure you want to delete this event?" href="/events/3">
I've tried changing the 'X' in the first one to an image (in case an image_tag did the trick) - no luck. However, when I changed the link_to to a button_to it did delete, but not confirmation which I assume button does not support. So I'm not sure if I maybe has some javascript error somewhere else, which I assume to not be the case since it works in the other case or maybe I'm missing something somewhere.
Edit:
I forgot to mention I also have a comment for each item and that works as well...
<%= link_to 'X', [comment.item, comment], :confirm => 'Are you sure?', :method => :delete, :remote => true %>
<a rel="nofollow" data-remote="true" data-method="delete" data-confirm="Are you sure?" href="/items/83/comments/32">X</a>
Fixed it, the problem was I had a div behind these links where I bound an click event to and in which I also called event.stopPropagation() thus prevented the data calls to be made.

Resources