How to create a rails button with an icon and text? - ruby-on-rails

How would you create this button using a rail helper?
<button type="submit" class="btn">
Create My Account <i class="fa"></i>
</button>
So far I have
<%= f.submit "Create My Account", :class => "btn" %>

You can use the button form helper and pass it a block.
<%= f.button class: 'btn' do %>
Create My Account <i class="fa"></i>
<% end %>
See more at http://api.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-button

https://github.com/bokmann/font-awesome-rails
Here you will get answer of your quesiton.
<%=f.submit (fa_icon "camera-retro", text: "Take a photo"), class: "btn" %>

Does this work?
<%= f.submit "Create My Account <i class=\"fa\"></i>", :class => "btn" %>

there are many options:-
<%= f.submit (‘<i class=“fa fa-thumbs-up fa-lg”> </i>’).html_safe,:class=>"btn "%>
--------------------------------------------------------------------
<%= button_to update_users_path, {remote: true, class: "btn btn-small"} do %>
Submit <i class="fa-save fa-md"></i>
<% end %>
--------------------------------------------------------
<%= button_tag( :class => "button_black") do %>
Submit Details <i class="fa fa-reset fa-md"></i>
<% end %>

5 different ways of doing it have already been given. I prefer:
<%= f.submit :class => "btn" do %>
Create My Account <i class="fa"></i>"
<% end %>
I think its the cleanest.

Related

Using a bootstrap glyphicon in a Rails button using button_tag or form_for

The seemingly trivial task of using a bootstrap glyphicon in a form submit button is anything but. I can't get button_tag or form_for to work.
button_tag successfully shows the glyphicon, but fails because (looking at the console) it doesn't submit a request to the server. It's dead, nothing happens:
<%= button_tag(type: 'submit', name: nil, class: 'btn btn-default btn-xs', id: 'vote_button',
path: postvoterelationships_path, remote: true) do %>
<span class='glyphicon glyphicon-star-empty' aria-hidden="true"></span>
<%= hidden_field_tag(:voter_callsign, #character.callsign) %>
<%= hidden_field_tag(:voted_id, #post.id) %>
<% end %>
form_for is failing because, while it successfully sends a request, I can't get it to display the glyphicon. The following two variations both just create a large grey button with 'Create Postvoterelationshiop' in the middle:
<%= form_for(#character.active_post_vote_relationships.build, remote: true) do |f| %>
<div><%= hidden_field_tag(:voter_callsign, #character.callsign) %></div>
<div><%= hidden_field_tag(:voted_id, #post.id) %></div>
<%= f.submit do %>
<span class="glyphicon glyphicon-star-empty"></span>
<% end %>
<% end %>
<%= form_for(#character.active_post_vote_relationships.build, remote: true) do |f| %>
<div><%= hidden_field_tag(:voter_callsign, #character.callsign) %></div>
<div><%= hidden_field_tag(:voted_id, #post.id) %></div>
<%= f.submit class: "glyphicon glyphicon-star-empty" %>
<% end %>
How do I get either button_tag to submit the request, or form_for to display the glyphicon?
You could try button_to
<%= button_to postvoterelationships_path, class: 'btn btn-default btn-xs', params: {voter_callsign: #character.callsign, voted_id: #post.id}, remote: true do %>
<span class="glyphicon glyphicon-star-empty"></span>
<% end %>

Rails - Unable to visit link

I tried to follow a tutorial by Mackenziechild.me.
Below is the code in github https://github.com/ikanyu/raddit
Demo app: https://whispering-shelf-9164.herokuapp.com/links/1
Can anyone point out why when I inspect element on the link I have created(for example Facebook link), I can clearly see facebook. However, when I click on the link, it gives me error.
ActiveRecord::RecordNotFound in LinksController#show
Couldn't find Link with 'id'=facebook
def set_link
#link = Link.find(params[:id])
end
def authorized_user
...
Thanks!!
<div class="page-header">
<h1><%= #link.title %><br> <small>Submitted by <%= #link.user.name %></small></h1>
</div>
<div class="btn-group">
<%= link_to 'Visit URL', #link.url, class: "btn btn-primary" %>
</div>
<div class="btn-group pull-right">
<%= link_to like_link_path(#link), method: :put, class: "btn btn-default btn-sm" do %>
<span class="glyphicon glyphicon-chevron-up"></span>
Upvote
<%= #link.get_upvotes.size %>
<% end %>
<%= link_to dislike_link_path(#link), method: :put, class: "btn btn-default btn-sm" do %>
<span class="glyphicon glyphicon-chevron-down">
Downvote
<%= #link.get_downvotes.size %>
<% end %>
</div>
<% if #link.user == current_user -%>
<div class="btn-group">
<%= link_to 'Edit', edit_link_path(#link), class: "btn btn-default" %>
<%= link_to 'Destroy', #link, method: :delete, data: { confirm: 'Are you sure?' }, class: "btn btn-default" %>
</div>
<% end %>
<h3 class="comments_title">
<%= #link.comments.count %> Comments
</h3>
<div id="comments">
<%= render :partial => #link.comments %>
</div>
<%= simple_form_for [#link, Comment.new] do |f| %>
<div class="field">
<%= f.text_area :body, class: "form-control" %>
</div>
<br>
<%= f.submit "Add Comment", class: "btn btn-primary" %>
<% end %>
If you're using the following html to create a link in rails
Facebook.com
Rails will link you to YourApp.com/facebook.com (which is an invalid URL).
Try re-writing your link like this:
Facebook.com
You'll need to change the code in your view to this:
<div class="page-header">
<h1><%= #link.title %><br> <small>Submitted by <%= #link.user.name %></small></h1>
</div>
Alternatively, you can edit your #link.url to include the string "http://www."

No route matches [GET] "/links/www.twitter.com.au"

Hello building a reddit clone.
When i click on this link found here http://postimg.org/delete/saq41zozs/ it should go another website. In this case it's www.twitter.com.au
Error found here http://postimg.org/delete/uhlsxso1e/
Im guessing because i don't have a twitter.com route. I don't know how to set it up so it routes to twitter.com
Here's my routes.rb.
Rails.application.routes.draw do
resources :comments
devise_for :users
resources :links do
member do
put "like", to: "links#upvote"
put "dislike", to: "links#downvote"
end
resources :comments
end
root "links#index"
Here is my show.html.erb
<div class="page-header">
<h1><%= #link.title %><br> <small>Submitted by <%= #link.user.name %></small></h1>
</div>
<div class="btn-group">
<%= link_to 'Visit URL', #link.url, class: "btn btn-primary" %>
</div>
<div class="btn-group pull-right">
<%= link_to like_link_path(#link), method: :put, class: "btn btn-default btn-sm" do %>
<span class="glyphicon glyphicon-chevron-up"></span>
Upvote
<%= #link.get_upvotes.size %>
<% end %>
<%= link_to dislike_link_path(#link), method: :put, class: "btn btn-default btn-sm" do %>
<span class="glyphicon glyphicon-chevron-down">
Downvote
<%= #link.get_downvotes.size %>
<% end %>
</div>
<% if #link.user == current_user -%>
<div class="btn-group">
<%= link_to 'Edit', edit_link_path(#link), class: "btn btn-default" %>
<%= link_to 'Destroy', #link, method: :delete, data: { confirm: 'Are you sure?' }, class: "btn btn-default" %>
</div>
<% end %>
<h3 class="comments_title">
<%= #link.comments.count %> Comments
</h3>
<div id="comments">
<%= render :partial => #link.comments %>
</div>
<%= simple_form_for [#link, Comment.new] do |f| %>
<div class="field">
<%= f.text_area :body, class: "form-control" %>
</div>
<br>
<%= f.submit "Add Comment", class: "btn btn-primary" %>
<% end %>
As you are linking to an external site, as opposed to a relative url, you need to prepend your link with 'http'. Just change the link in question to:
<div class="page-header">
<h1><%= link_to #link.title, "http://#{#link.url}" %><br> <small>Submitted by <%= #link.user.name %></small></h1>
</div>

How do I do an <i> tag within a link_to helper?

I would like to replicate this:
<i class="icon-pencil"></i>Take The Pledge
I tried this:
<%= link_to("Take the pledge", root_path, :class => "btn btn-inverse btn-mini btn-ten") do %>
<i class="icon-pencil"></i>
<% end %>
But it gave me this error:
NoMethodError at /
undefined method `stringify_keys' for "/":String
At the link_to call.
Thoughts?
According to the documentation you need to put the (complete) link text in the block, like this:
<%= link_to(root_path, :class => "btn btn-inverse btn-mini btn-ten") do %>
<i class="icon-pencil">Take the pledge</i>
<% end %>
<%= link_to(root_path, :class => "btn btn-inverse btn-mini btn-ten") do %>
<i class="icon-pencil"></i>
Take The Pledge
<% end %>

button_tag like link_to rails 3

I need use this code:
<%= button_tag :class => "btn btn-primary" do %>
<%= t('.follow_all')%>
<% end %>
html output:
<button class="btn btn-primary" name="button" type="submit">
Follow all
</button>
if it's possible, How can I use this button like a link, something like:
<%= button_tag new_user_registration_path, :class => "btn btn-primary" do %>
<%= t('.follow_all')%>
<% end %>
I need use button_tag helper. I can not use link_to helper, or instead, if it's possible, How can I send params from button without use a form?
What about this:
<%= button_tag(:type => 'button') do %>
<% link_to t('.follow_all'), new_user_registration_path %>
<% end %>
Use button_to: http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-button_to
Try this:
<%= button_tag onclick: "location.href='{new_user_registration_path}'",
type: :button, class: "btn btn-primary" do %>
<%= t('.follow_all')%>
<% end %>

Resources