button with an image? - ruby-on-rails

I am trying to create a button with an image. So basically, I need the button_to version of the code below :|
<%= link_to image_tag(product.image_url, :class => "img"), line_items_path(:product_id => product) %>

This is a pretty old post, but for future reference: since Rails 3.2.1 you can use button_tag instead of button_to, as the first one natively allows images:
Creates a button element that defines a submit button, reset button or a generic button which can be used in JavaScript, for example. You can use the button tag as a regular submit tag but it isn’t supported in legacy browsers. However, the button tag allows richer labels such as images and emphasis, so this helper will also accept a block.
As for your example:
<%= button_tag image_tag(product.image_url), line_items_path(:product_id => product), class: 'img' %>
I didn't test the code, but it should work. It is possible you need to declare the url with url:

This is my solution:
Use a button helper (you can use the button_to helper method):
<%= f.submit 'Save', :class => "button_with_image_save" %>
CSS:
.button_with_image_save {
background: url(../images/icons/page_save.png) #f2efa8 no-repeat 10px 6px;
text-indent:30px;
display:block;
cursor: pointer;
}

You can create a helper as button_to link -
<%= button_to product.image_url, line_items_path(:product_id => product) %>
and in application_helper
def button_to(image_path, link)
link_to (image_tag(image_path, :class => "img"), link)
end
I guess this is what you want.

The short answer is that you need to create a helper method, which is quite simple to do:
Here is a similar SO posting the explains it: Is there a way with rails form helper to produce a button tag for submit
Good luck

Image submit button:
<%= image_submit_tag("team/team1.png", class: 'image-responsive') %>
Link with image:
<%= link_to(image_tag("team/team1.png", class: 'image-responsive'), root_path, :method => :get) %>

Add the image is the folder app/assets/image
In the view
<%= image_submit_tag('nameimage.png') %>
the disadvantage is that you can not change the size with size, but you must have the image of the size you want to appear

Related

Bootstrap buttons not applying styles Ruby on Rails

I'm having a situation here with my bootstrap buttons. I cannot get the styling to apply even though the css for the theme itself is working.
Here's my code
<%= button_to 'Sign Up', class: 'btn btn-green' %>
I tried another method, but this one gives me errors since the view isn't generated yet. But, I wanted to do was add html files that I already created for another website to the project. To use them as a view.
<%= button_to("View Web Page", {action: "Web_Page_To_Be_Used"}, class: "btn btn-primary") %>
Please, show me the best method.
UPDATE:
The code below has the best format for the link. The one I used was incomplete. For the placeholder text, you have to create a new route first. And then include it into the button's link.
= link_to 'Register', new_user_registration_path, class: 'btn btn-green btn-md' %>
http://apidock.com/rails/ActionView/Helpers/UrlHelper/button_to
html_options is the third argument of button_to so your second example is closer, you're probably getting an error because action expects a route.
<%= button_to("View Web Page", {action: "show"}, class: "btn btn-primary") %>

Bootstrap Popover and Rails

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') }%>

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 3 submit form with link

How I can submit form with link on correct rails 3 format?
Thanks.
<%= form_for #post do |f| %>
<%= f.label :title %><br>
<%= f.text_field :title %>
<p><%= f.submit %></p>
<% end %>
My code sample.
For people who came here via Google, I have an improvement on Zequez's answer. Instead of the method that he gives, add this method to the application helper instead:
def link_to_submit(*args, &block)
link_to_function (block_given? ? capture(&block) : args[0]), "$(this).closest('form').submit()", args.extract_options!
end
Then, as Zequez stated, for simple links you can just do this in your view:
<%= link_to_submit 'Submit Form' %>
...and for more complicated buttons you can pass HTML options and a block to be used inside the link. If you use Twitter Bootstrap, for example, this lets you add CSS classes, formatting and icons:
<%= link_to_submit( class: 'btn btn-primary' ) do %>
<strong>Submit</strong> the Form <i class="icon-arrow-right"></i>
<% end %>
The JQuery code will work as long as the link is a child of the form (that is, as long as link_to_submit is called from somewhere within the form_for block).
"Correct" is a tricky word in this context ;) . One could ask why you're not just taking a button element and make it look like a link?
Anyways — you can't achieve this with plain HTML (at least not to my knowledge). With a Javascript framework like e.g. jQuery you could simply do something like this:
$('a').click(function(){
$('form').submit();
return false;
});
Rails 2.3.x had a link_to_remote helper which let's you specify a :submit parameter (= DOM element's ID, default is the parent form). So you were be able to write:
link_to_remote 'submit', :url => {…}, :submit => "my_form"
But with Rails 3's push to UJS, this helper is gone.
You can add the following to the application helper:
def link_to_submit(text)
link_to_function text, "$(this).closest('form').submit()"
end
Then inside your view files you can just call
link_to_submit 'Submit Form'
And the link must be child of the form.
With jquery, this one-liner will work fine for a simple form.
<%= link_to t("translate.submit"), "#", class: "make it beautiful", :onclick=>"$('form').submit()" %>
Of course you don't really have to use jquery, just finding the dom element for your form will work fine as well.
<%= link_to t("translate.submit"), "#", class: "make it beautiful", :onclick=>"document.getElementById('your_form_id').submit()" %>
This way you don't use any ajax, just plain form submit.
In Rails 3, the link_to_remote helper is gone, but it's replaced with
link_to 'submit me', url_for(#post), {:remote => true, :class => 'submit_me'}
In your case, you likely want your form to do the AJAX, like so:
<%= form_for #post, :remote => true do |f| %>
<%= f.label :title %><br>
<%= f.text_field :title %>
<p><%= f.submit %></p>
<% end %>
With a companion link:
link_to 'submit me', '#', :class => 'submit_me'
Then, in an .js file included in the page body:
$('.submit_me').click(function() {
$('form').submit();
return false;
});
The idea is that anything more complicated than turning a link or form into an ajax request should be done with the jQuery callbacks, as listed here:
https://github.com/rails/jquery-ujs/wiki/ajax
And if you want to really get into interactive AJAX requests, go here for a great 2-part article on it.

Rails: How to make "button_to" button to appear on the sameline (without a newline)?

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;
}

Resources