<%= 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/
Related
i have the below code, and i just want to link my button to the next view
<button type="submit" class="login-button"><link_to home_page.html.erb></link_to>
<i class="fa fa-chevron-right"></i></button>
how can i fix this
I suppose you have form_tag or form_for somewhere outside your button.
You could do it totally the Rails way like
<%= submit_tag("submit") %>
or if you prefer a link
<%= link_to 'submit', your_path, your_options %>
or a button
<%= button_to 'subimit, your_path, your_options %>
just have a look rails guides and you will find plenty of examples
=> link_to generates a <a> tag, which is not input type="submit".Use button_to, which generates a form with a input type="submit" button to the link.
Assuming path of home_page.html.erb is homepage_path(replace it with your path.)
<%= button_to home_page_path,class: "login-button", method: :get do%>
<i class="fa fa-chevron-right"></i>
<% end %>
Alternatively you can use like this:-
<%= button_to "<i class="fa fa-chevron-right"></i>".html_safe, homepage_path, class: "login-button", method: :get %>
I'm not sure to have understood, but if you need to link to another page you don't need a button, you need a link.
You can add a simple link to that url (not the page, but the route to that page) and style it as a button with css if you want to make it look as you like.
If you need to submit and elaborate some stuff calling a method from your controller, it depends:
1.If your controller is a simple controller you can manage it with a redirect_to at the end of your method
def method
# your elaboration
redirect_to :your_route
end
2.If it is an API controller and you call it from a javascript function, you can add to your callback a window.location.href to your route
success: (data) => {
// your elaboration
window.location.href = "path/to/your/page"
}
Okay so this question has to do with the proper syntax for html.erb code. What I'm trying to do is use a popover button to display a form. I am able to make a button through the button_tag function, and I am able to make the form from the form_tag function, but I am not able to embed one inside the other. I'm not even entirely sure that this is something I should be doing at all. My understanding was that best practices is to avoid using html when you can use erb to do the work of generating the page.
Anyway, here is the code I have thus far:
<%= button_tag "Remove Friend", :title=>"Remove from Friend List",
:id=>"removeFriend", :class=>"btn btn-default", :rel=>"popover",
:data => {:html=>"true", :placement=>"top", :content=>
"form_tag(\"/friend\", method: \"post\") do
label_tag(:symbolInput, \"Enter Username\")
text_field_tag(:symbolInput)
submit_tag(\"Remove\")
end"}%>
So what this does is generate the following HTML
<button class="btn btn-default" data-content="form_tag("/friend",
method: "post") do
label_tag(:symbolInput, "Enter Username")
text_field_tag(:symbolInput)
submit_tag("Remove")
end" data-html="true" data-placement="top" id="removeFriend"
name="button" rel= "popover" title="Remove from Friend List"
type="submit">Remove Friend</button>
So essentially it just literally copied the erb code as text into the popover.
I have also tried framing each line with <%= %>, but I am very unclear on what the syntax for this would be, or when you should do that.
Basically what needs to happen is that the erb for the form has to be translated to html, which will then be passed to the :content section of the button_tag.
Should I be doing this in this way, or is there some other method to accomplish what I am trying to do? Being new to rails, I'm not sure what the best practices are.
By the way, if I use html to code either the form or the button and erb for the other one, it works perfectly, so there is a work around.
The minute you are inside the Embedded Ruby Tags eg <% %> then everything you do inside here is just ruby or to say it another way must be valid ruby, can be any ruby.
The first refactoring I would do is to move all that content code out own it's own. This halfway point is tidier and should give you a better idea.
<% remove_friend_form = "form_tag(\"/friend\", method: \"post\") do
label_tag(:symbolInput, \"Enter Username\")
text_field_tag(:symbolInput)
submit_tag(\"Remove\") end" %>
<%= button_tag "Remove Friend", :title=>"Remove from Friend List",
:id=>"removeFriend", :class=>"btn btn-default", :rel=>"popover",
:data => {:html=>"true", :placement=>"top", :content=> remove_friend_form }%>
After you isolate the content it becomes more obvious that the 'remove_friend_form' could be isolated even further. To do this move this content into it's own partial.
# create new file in the same folder as the current view.
# _remove_friend_form.html.erb
<%= form_tag("friend", method: "post") do |f| %>
<%= f.label_tag(:symbolInput, "Enter Username") %>
<%= f.text_field_tag(:symbolInput) %>
<%= f.submit_tag("Remove") %>
<% end %>
The main page now looks like this
<%= button_tag "Remove Friend", :title=>"Remove from Friend List",
:id=>"removeFriend", :class=>"btn btn-default", :rel=>"popover",
:data => {:html=>"true", :placement=>"top", :content=> (render partial: 'remove_friend_form') }%>
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 have a block -iterator to display a user and a related action to be displayed on the same line for every iteration ?
You can visualize like this :-
user1 update_attribute_button
user2 update_attribute_button.
...
and so on.
But if I use a button_to method the button is getting displayed on a newline. which I don't want.heres my code snippet:-
<% #post.bids.each do |bid| %>
<p>
<%= bid.user.email %>
<%= button_to "Offer Bid", offer_bid_post_bid_path(#post, bid), :action => "offer_bid">
</p>
<% end %>
But with the above code the 'email' and 'offer bid' are appearing in two lines, but i want to display them as pairs, with each pair appearing on one line.
I can achieve it using a 'link_to'.
If I use 'link_to' instead of 'button_to' I'm able to achieve my idea, but not able to do it with a button_to. Why is this difference between link_to and button_to.
I want to display the 'offer bid' as a button only.
Now, How to make the button_to buttin appear on the same line as the 'email'.
Please let me know if the question's description is not clear.
Thanks in advance.
A button_to generates a form and a div around the button. So, if you do not restrict the width of the container which is before the button, it will take 100% of the width pushing the button down.
<% #post.bids.each do |bid| %>
<p>
<div style="float: left; width: auto;"><%= bid.user.email %></div>
<%= button_to "Offer Bid", offer_bid_post_bid_path(#post, bid), :action => "offer_bid" %>
</p>
<% end %>
This is not to do with rails but rather how web browser's render forms.
A button_to is just a convenient way to create a form with a non-visible field. If you want the form on the same row as the email address you'll need to put it into a container, most usually a div, set the div to float left and overflow hidden.
button_to renders to a form tag, so I just altered the CSS to ensure the form tag doesn't create a new line.
But to apply it only to a specific form tag then give add form_class: "myButton" see below.
In your something.html.erb
<%= button_to "Offer Bid", offer_bid_post_bid_path(#post, bid), :action => "offer_bid", form_class: "myButton">
Put this in your application.css
myButton {
display: inline;
}