If im using Ajax to render a form into a DOM element on my page, how would I handle cancel link behavior?
Assuming I have <%= f.submit %> at the bottom of the form, what would I use for a cancel link next to it?
The ideal would be to get rid of the form without submitting or redirecting.
Use whatever you prefer.
= link_to 'Cancel', '#', class: 'cancel-link'
or
= button_to 'Cancel', '#', class: 'cancel-link'
Related
I have some javascript that shows a form when you click an edit icon. The form has a working button that goes into the controller's update function.
I also have a Cancel button in the form, which goes into the update function. However, I don't want to re-direct or re-render from the update function. Re-rendering would lose other forms that may be shown.
Is there a way to have the button ONLY call the javascript? The javascript gets called, but then it goes into the controller.
Moving the cancel button outside of the form_for works, of course, but then the two buttons are no longer next to each other.
<%= form_for(#guide) do |f| %>
<%= render 'form_part', test: 'name', field: field, f: f %>
<%= render 'form_part', test: 'city', field: field, f: f %>
<%= render 'form_part', test: 'province', field: field, f: f %>
<%= render 'form_part', test: 'country', field: field, f: f %>
<%= render 'textarea', test: 'description', field: field, f: f %>
<p>
<%= f.submit "Save", class: "btn btn-primary edit-guide-btn" %>
<%= button_tag "Cancel", class: "btn btn-default edit-guide-btn",
onclick: "toggle('#{field}','cancel')" %>
</p>
<% end %>
Now I realize I will have the same problem on submit. The controller will have to re-render the edit page, and the forms that are shown will be hidden again.
How would I allow a bunch of forms to be shown, each with their own submit buttons. When a submit button is clicked, it would only submit to that form, and leave the others alone, without re-rendering the page?
If you make your call to button_tag with type: 'button' it should fix your issue with the cancel button.
button_tag "Cancel", type: 'button', class: "btn btn-default edit-guide-btn", onclick: "toggle('#{field}','cancel')"
For your the part about the submissions, if you want to submit a form without reloading the page, you will probably need to do one of the following:
Use ajax to submit the form
This is probably the most work but gives you more flexibility and achieves your goal of not re-rendering the page
Submit the form with a target="_blank" attribute
This will open a new window with the results of the form submission. From the wording of your question, it doesn't sound like you would want to use this method for your use case
Add a hidden iframe to the page with an id and set the form's target attribute to the id of the iframe
This option is a good middle ground if you don't need to do anything with the response but it does have some side effects like adding to the user's history in some browsers which can be confusing when they hit the back button and it doesn't do anything.
Working in rails 3. When I do something very simple like this:
<p><%= submit_tag 'Create' %></p>
I get the commit: Create key/value pair in my params hash in my action. However, as soon as I add a disable_with:
<p><%= submit_tag 'Create', :disable_with => 'Processing...' %></p>
I don't get the value of commit. The problem is, I would like to be able to switch on the value of the submit tag when I have multiple submit buttons. It seems that I can't do that when I have :disable_with set?
It should be datat-disable-with.Try this
<p><%= submit_tag 'Create', data: {:disable_with => 'Processing...'} %></p>
Yes you are right, with :disable_with the value of this attribute will be used as the value for the disabled submit button instead of the value initially set in the submit_tag.
Following excerpt from the submit_tag documentation:
:disable_with - Value of this parameter will be used as the value for
a disabled version of the submit button when the form is submitted.
This feature is provided by the unobtrusive JavaScript driver.
Posting this here in case anyone needs this in the future:
The button isn't getting submitted with the rest of the form because it is disabled. (Which, admittedly, should have been obvious.) My solution is to create a hidden_field_tag that gets updated with javascript before the form gets submitted, but it feels a little inelegant.
I'm trying to submit a form using link_to as follows:
<%= form_for(#post, :url=> '/post/action', :method=> 'post', :html => {:id=>'form_id'} ) do |f| %>
....
<%= link_to 'submit', "/post/action", :onclick=>"document.getElementById('form_id').submit()" %>
....
but it is not posting the form, it is simply redirecting my form to the specified url. Does anyone know how to do this?
You can use:
<%= link_to 'submit', "#", :onclick => "$('#form_id').submit()" %>
if you are using JQuery and a later version of rails.
Above will work but if you have a really long page it will navigate to top of the page because of "#" so if you want to avoid that you can do:
<%= link_to 'submit', "", :onclick => "$('#form_id').submit()" %>
I think both things happen. The browser starts to submit the form, but it also follows the link's href. You can fix it by linking to # instead of /post/action...
...however, I don't recommend doing it. There are a few better approaches:
First, you can use a button instead of a link. You'll have to style it to make it look like a link, but that should not be a problem. It will be better, because it won't break the Principle of Least Surprise (people who read the code expect forms to be submitted with buttons) and you won't need the JavaScript.
If you insist on using a link, you should at least move the JavaScript code from the view to a JavaScript file. Then have this behavior added unobtrusively (although, you won't have a good fallback with the link). Assuming you're using jQuery, it should be as simple as:
$(document).on('click', '[data-submit-form]', function(e) {
e.preventDefault();
$(this).closest('form').submit()
}
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.
I need to create a button for downloading
So far I have create a button using this
<%= form_tag '/myproject/download',
:multipart => true,
:onclick=>"document.getElementById('popup').style.display='block';
return true;" %>
<%= submit_tag 'Download'%>
<% end %>
but I don"t know how to link the submit_tag with the link of downloading. (so as simple as if I press the button, then it will go to localhost/file and pop up a save to option)
I am aware that I can use link_to, but I need to put a button that acts as a link_to
Can anyone point out how to do this in rails? thank you
Try button_to method, which is nearly identical to link_to
http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-button_to
You can put a link_to and then style it like a button. Or you can do something like this Is there a way with rails form helper to produce a button tag for submit
Try to use the button_to method. You can take a look to the docs.