Question

Possible Duplicate:
Is there a way with rails form helper to produce a button tag for submit

This is probably quite an easy question, but I’ve got this HTML layout:

<button class="btn btn-large btn-inverse"><i class="icon-white icon-shopping-cart"></i> Add to bag</button> 

This is an add to cart button, I’m following along the book Agile Web Development to create a cart. Question is, with embedded HTML between the button tag, how do I get it to render like that? I tried this:

%= button_to raw('<i class="icon-white icon-shopping-cart"></i> Add to bag'), line_items_path(product_id: product) %>

But firstly it prints an “input” not a button, and the text is all askew in the html and not between opening and closing tags.

I know I can just write it all manually, but was hoping to figure out if there’s a shortcut way to do this HTML to output using the rails tags, mainly because with twitter bootstrap I see this type of HTML pattern all the time…

Any help is appreciated.

Answer 1

As commented by Mischa, it is similar to Is there a way with rails form helper to produce a button tag for submit.

The content_tag helper can be used to write the button in rails. However, it is not a shortcut, since it will take longer to write than the raw html.

However, if you need to do this often, you can write a custom helper method to do it the way you want!

Just add to your app/helpers/application_helper.rb

def my_button_to name, options = {}, html_options = {} # or some variation
  # eg. deal with options hash the way button_to deals with it here?
  content_tag :button, html_options = nil do
    raw name
  end
end

---

Now you can use this in your views:

<%= my_button_to '<i class="icon-white icon-shopping-cart"></i> Add to bag', {}, :class => "btn btn-large btn-inverse" %>