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
Related
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 am looking to make a link_to based on the following href. I'm not sure how to put the <i> element inside the link_to.
Any ideas?
<i class="fa fa-folder"></i> View
You can wrap any thing you need inside the link_to opening with do and closing it with end:
<%= link_to '', class: 'btn btn-white btn-sm' do %>
<i class="fa fa-folder"></i> View
<% end %>
That will generate:
<a class="btn btn-white btn-sm" href="">
<i class="fa fa-folder"></i> View
</a>
Note the first argument must be '', this way all inside of it will act as content inside an <a> tag.
I have this helper in my user index... all good.
<%= link_to user.name, edit_user_path(user) %>
What i'd like to do is have that helper buried/hidden in pencil glyph that links to the opening of a modal which in turn is in the edit_user_path.
I can get everything to work if I do this
<td class= "centre" >
<p data-placement="top" data-toggle="tooltip" title="Edit">
<button class="btn btn-primary btn-xs" data-title="edit"
data-toggle="modal" data-target="#edit"
<%= link_to user.name, edit_user_path(user) %> >
<span class="glyphicon glyphicon-pencil"></span>
</button>
</p>
</td>
The link is physically in the button but also visible on the page...How should I be doing this
Hours later...EDIT...
I can now get everything working with the username hidden and only the glyph showing (which is correct) but by removing the user.name I now render a blank form no user content. I should say at this point that both signup and edit are sharing a form partial
this almost works, but renders a blank form for signup not edit... and its not very rails
<td class= "centre" >
<p data-placement="top" data-toggle="tooltip" title="Edit">
<button class="btn btn-primary btn-xs" data-title="edit" data-toggle="modal" data-target="#edit" >
<span class="glyphicon glyphicon-pencil"></span>
</button>
</p>
</td>
I have some ruby and HAML code that works by showing two buttons on the screen. I want to change these to radio buttons. This is the code that currently shows two buttons:
.row
.col-md-6
.input-group
= render #audience, opportunity: :opportunity
What gets rendered out looks like this:
<div class="row">
<div class="col-md-6">
<a class="btn btn-lg btn-block btn-default audience-tab active" data-value="consumer" data-remote="true" href="/opportunities/229/edit?audience=consumer">Consumer</a>
</div>
<div class="col-md-6">
<a class="btn btn-lg btn-block btn-default audience-tab " data-value="business" data-remote="true" href="/opportunities/229/edit?audience=business">Business</a>
</div>
</div>
I don't need that href= stuff. Not sure why that is there. But what I want to get rendered out is two radio buttons that say "Consumer" and "Business" with a label that says "Audience Type". Something like this should work:
Audience Type:
<input type="radio" name="audience" value="consumer"> Consumer
<input type="radio" name="audience" value="business"> Business
As I see you use Bootstrap, so HAML code should look like:
%p Audience Type:
.radio
%label
%input{name: "audience", type: "radio", value: "consumer"}
Consumer
.radio
%label
%input{name: "audience", type: "radio", value: "business"}
Business
If #audience is a instance of Audience class you must place HAML code into app/views/audiences/_audience.haml template.
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>