Rails link_to not working within a button element

Question

I have the following HTML and .erb code:

<button type="button" class="btn btn-default btn-lg"><%= link_to "Customer Information", customer_information_path %></button>

The link renders fine, but does nothing when clicked.

Here is my routes file:

  devise_scope :user do
   root :to => "devise/sessions#new"
  end

  get "hub" => "pages#hub"
  get "customer_information" => "pages#customer_information"

And here is my pages controller:

class PagesController < ApplicationController

 def hub
 end

 def customer_information
 end

end

The code does not throw any error.

Thoughts?

is there a view at app/views/pages/customer_information.html.erb ? — Anthony
– Anthony, Commented Jul 20, 2014 at 3:20
Could you add a little more information as to why you need a button? — vee
– vee, Commented Jul 20, 2014 at 3:22
Yes, the customer_information.html.erb file does exist in my views. — Dustin James
– Dustin James, Commented Jul 20, 2014 at 3:22
So, is it possible to lose the button and style the link as a button? — vee
– vee, Commented Jul 20, 2014 at 3:24
I don't have a reference to show you at the moment, but anchor tag will mark the text within the anchor tags as hyperlink, so clicking the button part outside of the anchor tag is not going to work because there is no link on the button. More information on anchor tag — vee
– vee, Commented Jul 20, 2014 at 3:33

mu is too short · Accepted Answer · 2014-07-20 03:40:38Z

7

The link_to helper produces an <a> element and you can't put an <a> inside a <button>, that would violate the content model for <button>:

Content model:
Phrasing content, but there must be no interactive content descendant.

and interactive content includes <a>. If you feed a browser a <button><a></a></button>, then it might rewrite the HTML to be valid or it might not let the click get to the <a>.

Consider using button_to to produce the <button> instead of <button> and link_to or try adding a click handler to the <button> in JavaScript. Using button_to might complicate your CSS though as button_to will add a lot of extra markup (such as <form>s and <div>s). Another option might be to use only <a> elements in the toolbar but style them to look like buttons, then you could just use link_to for the whole toolbar.

answered Jul 20, 2014 at 3:40

mu is too short

436k71 gold badges863 silver badges822 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

vee Over a year ago

The OP could actually just use link_to instead of button or button_to as the link is in the navigation and not within a form. I saw this more to be a styling a link question that is at the same time digging for solid information as you've pointed in the first part of your answer.

Dustin James Over a year ago

@vee you're right - instead of generating the button element I just applied the button class to the link_to method and it worked. Thanks for the info, I appreciate the help.

mu is too short Over a year ago

@vee: I thought "Another option might be to use only <a> elements in the toolbar but style them to look like buttons, then you could just use link_to for the whole toolbar." covered that, perhaps I could have been more explicit though.

mu is too short Over a year ago

@vee: No worries, I'm not trying to pick a fight or hostile, just wondering if I missed something or something wasn't clear. Anyway, I think Dustin's answer fills in any gaps in mine so we're all good.

Dustin James · Accepted Answer · 2014-07-20 04:16:28Z

2

The following revisions work:

<ul>
  <li><%= link_to "Customer Information", customer_information_path, :class => "btn btn-default btn-lg" %></li>
</ul>

So it would seem applying the class to the link_to element generates the CSS results and still allows the link to function.

answered Jul 20, 2014 at 4:16

Dustin James

5711 gold badge9 silver badges21 bronze badges

Comments

Richard Peck · Accepted Answer · 2014-07-20 08:14:03Z

2

Button

Building on mu is too short's answer, you have to consider what a button is there to do -

The tag defines a clickable button.

Inside a element you can put content, like text or images. This is the difference between this element and buttons created with the element.

As alluded to by mu is too short, the button element is standalone (cannot include any other element inside). This means if you want to use the button to create a link, you'll have to think differently about what you're trying to achieve

--

button_to

Rails has two ways of achieving a "link":

What you'll be looking for is likely button_to:

<%= button_to "New", new_articles_path %>
# => "<form method="post" action="/articles/new" class="button_to">
#      <div><input value="New" type="submit" /></div>
#    </form>"

This, as you can see by the demo above, creates a simple form which allows you to send data to an endpoint. This might seem overkill for a link, but it's the best way to create a "native" HTML button. Alternatively, you could style your link as a button too

<%= button_to "Customer Information", customer_information_path, method: :get, class: "btn btn-default btn-lg"

answered Jul 20, 2014 at 8:14

Richard Peck

76.8k9 gold badges98 silver badges148 bronze badges

1 Comment

Dustin James Over a year ago

Thanks for this info - as a follow up question, if I am linking to a static page, should I just use pure HTML or is it considered best practice to continue using Rails?

Collectives™ on Stack Overflow

Rails link_to not working within a button element

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related