Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rails convert links to bootstrap buttons

I have built some code that sorts an index page, using links in my view. This works fine with links, and the working code is this:

<p>
  <%= link_to "Sentence", :controller => params[:controller], :action => params[:action], :type => '1', :class => "btn" %>
  <%= link_to "Question", :controller => params[:controller], :action => params[:action], :type => '2', :class => "btn" %>
  <%= link_to "Mnemonic", :controller => params[:controller], :action => params[:action], :type => '3', :class => "btn"  %>
  <%= link_to "Article", :controller => params[:controller], :action => params[:action], :type => '4', :class => "btn"  %>
  <%= link_to "Recommendation", :controller => params[:controller], :action => params[:action], :type => '5', :class => "btn"  %>
</p>

I would like to use a button group, and have built this example using Twitter Bootstrap in plain HTML:

<div class="btn-group">
  <button class="btn">Sentence</button>
  <button class="btn">Question</button>
  <button class="btn">Mnemonic</button>
  <button class="btn">Article</button>
  <button class="btn">Recommendation</button>
</div>

I cannot get the links converted to the button row. I have tried various styling options as well as attempting to use button_to. Ideally I would like to further style the buttons so that the currently selected one is a different color than the others.

EDIT

Output of HTML as suggested:

<div class="btn-group">
  <a href="/dialog_catagories?class=btn&amp;type=1">Sentence</a>
  <a href="/dialog_catagories?class=btn&amp;type=2">Question</a>
  <a href="/dialog_catagories?class=btn&amp;type=3">Mnemonic</a>
  <a href="/dialog_catagories?class=btn&amp;type=4">Article</a>
  <a href="/dialog_catagories?class=btn&amp;type=5">Recommendation</a>
</div>

The btn-group is preventing the buttons from rendering on the page for some reason, even though it is in the html.

EDIT 2

HTML code as per Varun's answer:

<div class="btn-group">
  <a href="/dialog_catagories?html%5Bclass%5D=btn&amp;type=1">Sentence</a>
  <a href="/dialog_catagories?html%5Bclass%5D=btn&amp;type=2">Question</a>
  <a href="/dialog_catagories?html%5Bclass%5D=btn&amp;type=3">Mnemonic</a>
  <a href="/dialog_catagories?html%5Bclass%5D=btn&amp;type=4">Article</a>
  <a href="/dialog_catagories?html%5Bclass%5D=btn&amp;type=5">Recommendation</a>
</div>

SOLUTION

@Varun's suggested answer worked in the end:

<div class="btn-group">
  <%= link_to "Sentence", "?type=1", :class => "btn" %>
  <%= link_to "Question", "?type=2", :class => "btn" %>
</div>

I am a bit unclear how the functionality is still working, as the following is not being explicitly passed:

:controller => params[:controller], :action => params[:action]

But it is working fine. Thank you.

like image 810
port5432 Avatar asked Nov 22 '12 13:11

port5432


2 Answers

Try this:

<div class="btn-group">
  <%= link_to "Sentence", :controller => params[:controller], :action => params[:action], :type => '1', :html => { :class => "btn" } %>
  <%= link_to "Question", :controller => params[:controller], :action => params[:action], :type => '2', :html => { :class => "btn" } %>
  <%= link_to "Mnemonic", :controller => params[:controller], :action => params[:action], :type => '3', :html => { :class => "btn" } %>
  <%= link_to "Article", :controller => params[:controller], :action => params[:action], :type => '4', :html => { :class => "btn" }  %>
  <%= link_to "Recommendation", :controller => params[:controller], :action => params[:action], :type => '5', :html => { :class => "btn" } %>
</div>

Edit

Try this:

<div class="btn-group">
  <%= link_to "Sentence", "?type=1", :class => "btn" %>
  <%= link_to "Question", "?type=2", :class => "btn" %>
</div>
like image 60
vvohra87 Avatar answered Oct 07 '22 03:10

vvohra87


I'm still on Rails 2 and the html=> { :class => :btn } wasn't working for me.

I did this and it renders/works nicely

        <div class="btn-group">
          <%= link_to "Pool my Order", 
             {:controller => :purchasing, :action => :search_for_salesdoc,
              :sold_to_number => sold_to, doc_number => @cart.doc_number, 
              :search_option => :pool},
             :class => "btn btn-success align-center" %>
        </div>
like image 24
user3337734 Avatar answered Oct 07 '22 03:10

user3337734