I would like to have an icon as the submit button for my form. Something like:
<%= form.submit do %>
<i class="fas fa-arrow-right fa-2x"></i>
<% end %>
Is having custom html as a form submit possible, if so what is the syntax?
Use html button tag:
<button type="submit" class="btn btn-sm"><i class="fas fa-arrow-right fa-2x"></i></button>
That's it!
I'm working on restructuring my code to clean it up and I'm trying to move over into using view helpers to do this. Right now I have the following in my views file:
<div class="btn-group wkt-btn-group">
<button type="button" class="btn share dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">SHARE
<span class="fa fa-angle-down" style="font-size:16px;"></span>
</button>
<ul class="dropdown-menu wk-social">
<li>
<div class="jssocials-share jssocials-share-email">
Print
<i class="jssocials-share-logo"></i>
</div>
</li>
<li>
<div class="jssocials-share jssocials-share-email">
<a href="mailto:?Subject=Book Subject&Body=I%20saw%20this%20and%20thought%20of%20you!%20 http://url.com/books/<%= book.book_name %>" class="jssocials-share-link">
<i class="fa fa-at jssocials-share-logo"></i><span class="jssocials-share-label">E-mail</span>
</a>
</div>
</li>
<li>
<div class="jssocials-share jssocials-share-facebook fb-share-button" id="fbid">
<div data-href="http://url.com/books/<%= book.book_name %>" data-layout="button" data-size="small" data-mobile-iframe="true">
<a class="fb-xfbml-parse-ignore jssocials-share-link" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.url.com%2Fsomebooks%2Fbooks%2F<%= book.book_name%>&src=sdkpreparse">
<i class="fa fa-facebook jssocials-share-logo"></i><span class="jssocials-share-label">Share</span>
</a>
</div>
</div>
</li>
The only thing I can think of to alter this to a view helper is to go to books_helper.rb and do something like:
module BooksHelper
def social_sharing (media)
when 'email'
content_tag(:div, class: 'jssocials-share jssocials-share-email')
end
end
I've barely scratched the service here but I feel as even that is incorrect. I've nothing that's looking for the media type so email is worthless. Plus there's a div class around the href I'm hitting but the href has it's own class and an onclick plus styling. Any nudge would be appreciated. I have never built out a custom view helper.
You could pass a block...
<%= social_sharing 'email' do %>
Print
<i class="jssocials-share-logo"></i>
<% end %>
And define your helper method as...
module BooksHelper
def social_sharing(media, &block)
case media
when 'email'
content_tag :div, class: 'jssocials-share jssocials-share-email', &block
end
end
But I think that might just make your code more obscure even if it does DRY up the jssocials classed divs. I highly recommend "99 Bottles" by Sandi Metz which amongst other things talks about producing clear, maintainable code.
https://www.sandimetz.com/99bottles/
I am having a bit of trouble figuring out how to create a link_to tag for the syntax below.
<li class="bg-master-lighter">
<a href="#" class="clearfix">
<span class="pull-left">Logout</span>
<span class="pull-right"><i class="pg-power"></i></span>
</a>
</li>
I am using devise gem so i am trying to add a logout method to the link but my styling goes like above
As per Devise manual the link should look like this:
<li class="bg-master-lighter">
<%= link_to destroy_user_session_path, method: :delete, class: "clearfix" do %>
<span class="pull-left">Logout</span>
<span class="pull-right"><i class="pg-power"></i></span>
<% end %>
</li>
Basically, what I am trying to get dropdown button from rails button_to, this is done via ajax, when someone clicks on that button, it shows rendered cart <ul> tag via ajax render.
bootstrap:
<button class="btn btn-primary dropdown-toggle" type = "button" data-toggle="dropdown"><span class="glyphicon glyphicon-shopping-cart"></span> <span class="badge"><%="#{#cart.line_items_count}" %></span></button>
rails button_to:
%= button_to navbar_cart_path, {remote :true, method: :get, :class => 'btn btn-primary dropdown-toggle', data_toggle: "dropdown"} do %>
<span class="glyphicon glyphicon-shopping-cart"></span>
<span class="badge" id="cart-badge-id"><%="#{#cart.line_items_count}" %></span>
<% end %>
This generates similar button tags, except when looking at html source code, bootstrap button has attribute type="button", but rails generates type="submit"
bootstrap:
<button class="btn btn-primary dropdown-toggle" type = "button" data-toggle="dropdown"><span class="glyphicon glyphicon-shopping-cart"></span> <span class="badge">5</span></button>
rails:
<form class="button_to" method="get" action="/navbar_cart data-remote="true">
<button class="btn btn-primary dropdown-toggle" data_toggle="dropdown" type="submit">
<span class="glyphicon glyphicon-shopping-cart"></span>
<span class="badge" id="cart-badge-id">5</span>
</button></form>
Another great question if whether or not it is even possible to even make a dropdown menu this way.
If you just want a drop down you could use select_tag('attr', options_for_select()) to get your drop down and then do something like this to kick off any ajax stuff you want to do:
$('#my_select_dropdown').change(function(){
//do stuff here
});
EDIT: Here is a link to look at select_tag docs in case you want more details: http://apidock.com/rails/ActionView/Helpers/FormTagHelper/select_tag
Just override the type attribute in the html_options argument of the method which is the same hash you are passing the class name for your element:
<%= button_to navbar_carth_path, {remote: true, method: :get}, {"class": "btn btn-primary dropdown-toggle", "data-toggle": "dropdown", "type": "button"} do %>
I think yo were also adding the html options within the same hash as the options hash which are not the same, the options hash (the first) are options for the rails helper per se, the second hash corresponds to attribute values that you want to apply to the rendered element:
button_to(name = nil, options = nil, html_options = nil, &block)
Check the signature of the method here.
Update You were also passing the remote :true parameter wrong, you have a space between the remote word and the actual value so it parses as a symbol, it should be: remote: true. On the other hand, I advice to enclose all html options of helpers (like data-toggle) between quotes and not only its values so that you can use hyphens instead of dashes (bootstrap option is data-toggle AFAIK, not data_toggle
So it seems like when using rails button_to and adding data: attributes doesnt overwrite type="button", so I tryed experimanting and came up with this.
<%= link_to navbar_cart_path, { method: :get, remote: true, class: "btn btn-primary dropdown-toggle", "id": "cart-button", "type": "button", "data-toggle": "dropdown" } do %>
<span class="glyphicon glyphicon-shopping-cart"></span>
<span class="badge" ><%="#{#cart.line_items_count}" %></span>
<% end %>
This generates HTML code:
a class="btn btn-primary dropdown-toggle" id="cart-button" type="button" data-toggle="dropdown" data-remote="true" data-method="get" href="/navbar_cart">
<span class="glyphicon glyphicon-shopping-cart"></span>
<span class="badge" >5</span>
Where I can then use AJAX GET to render #cart partial in dropdown tags
I have a rails app that has links included in bootstrap buttons.
<td>
<button class="btn btn-default"><span class="glyphicon glyphicon-eye-open"></span>
<%= link_to 'Details', user_story %>
</button>
</td>
The HTML shows up properly, and the link is assigned correctly in the anchor tags:
<td><button class="btn btn-default"><span class="glyphicon glyphicon-eye-open"></span> Details
</button>
</td>
It works in chrome but not in Firefox or IE. However when I remove the bootstrap styling, the link_to function does work...
How can I keep bootstrap styling on my pages and keep cross browser compatibility? Or is there a way to force rails to assign the anchor tags around the button?for example: <td><button class="btn btn-default"><span class="glyphicon glyphicon-eye-open"></span> Details</button></td>
Update:
Now in firefox but not in IE it works using:
<% link_to user_story do %>
<button class="btn btn-default"><span class="glyphicon glyphicon-eye-open"></span> Details</button>
<% end %>
It is not valid HTML to have a link inside of a button. It is easy to make links look like buttons, though. Try something like:
<td>
<%= link_to user_story, class: 'btn btn-default' do %>
<span class="glyphicon glyphicon-eye-open"></span> Details
<% end %>
</td>