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!
Related
I am very new for rails and I try to open an modal in my app. Here is my show.html.erb
app > views> event > show.html.erb
<div>
<button class="btn btn-info slide-down-right-drawer-btn" data-slide-block-id="#discussion-drawer">
<i class='ion ion-chatbubbles icon mr-5'></i>Discuss
</button>
</div>
This is my app > views > event > _discussion_drawer.html.erb
<div id="discussion-drawer">
<div class="col-md-12 col-sm-12 col-xs-12" style="line-height: 50px;">
<ol class="breadcrumb">
<li>Discussions</li>
<li class="active"><%= #co["name"] %></li>
</ol>
<button type="button" data-toggle="modal" data-target="#discussionFormModal" data-entity-id="<%= #co["id"] %>" class="btn btn-conf add-note-btn btn-info mb-20" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<b>Start new discussion...</b>
</button>
</div>
</div>
But this is not work. Am I doing right? Can any one help me for this?
It's not super clear which is the modal you're trying to open and where is the button to toggle it, but it took me a few tries to get comfortable with this too.
Make sure the ID on your modal matches the ID on the button
# this is on your button
data-toggle="modal" data-target="#discussionFormModal"
# this is on the modal
id="discussionFormModal"
Check that you've rendered the partial (_whatever_the_name_is.html.erb) properly in the same page that the button to open the modal is
<%= render partial: "<path to your partial>", locals: {<any variables that you need to pass to the modal>} %>
#example
<%= render partial: "shared/discussion_form", locals: {discussion: #discussion} %>
I think your HTML code is correct but bootstrap js is not loaded properly. you can simply check using browser inspect.
Make sure that your bootstrap.min.js loaded properly in rails app. you can also use CDN https://getbootstrap.com/docs/4.5/getting-started/download/
or
If you are using bootstrap gem follow https://robrace.dev/integrating-bootstrap-4-in-rails-6/ this article
I have a table with sliders (part of a form) in one column and a button (link to other page)
<button onclick="location.href='/main';">
<i class="icon icon-078-settings icon--s2" aria-hidden="true"></i>
</button>
Instead of opening the page, the button just submits the form. Any way I can fix this without breaking the table or the form?
Why don't just use anchor tag
<a href='/main'>
<i class="icon icon-078-settings icon--s2" aria-hidden="true"></i>
</a>
or
# If you are using erb
<%= link_to '/main' do %>
<i class="icon icon-078-settings icon--s2" aria-hidden="true"></i>
<% end %>
try below code:
<a href='/main' class="btn btn-primary">
<i class="icon icon-078-settings icon--s2" aria-hidden="true"></i>
</a>
If you used bootstrap css then you can add classes btn and btn-paimary which makes button.
Instead of opening the page, the button just submits the form.
Yes! Buttons are meant to perform actions that effects on front-end or back-end, they are not meant for navigation. You should use links(a.k.a anchors) to perform navigation.
<a href='/main'>
<i class="icon icon-078-settings icon--s2" aria-hidden="true"></i>
</a>
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 did long research, but cannot find solution. I want to make a list of toggle-buttons in my form and then save ones checked by user. I know that I can named toggle-button and then find it in controller by params[:togglebutton-name], but it seems that toggle-button hasn't got any value. So for example I have 5 toggle-buttons, and user will check two of them. Then I want to know about it in Controller. What should I do?
toggle-buttons:
<% current_user.type_tags.each do |type_tag| %>
<button name="type<%= type_tag.id %>" id="associated-type-tag-<%= type_tag.id %>" type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
<%= type_tag.name %>
</button>
<% end %>
Controller:
def create
#try = params[:type1]
render 'help'
end
Help:
Value: <%= #try %>;
And in result I have this:
Value: ;
I've already found the solution. I used btn-group with data-toggle: "buttons". Inside I have label and input with type=checkbox. That approach allows me to get a true value in my Controller if button is pressed. I can style the buttons on my own too.
I hope it will be useful for somebody.
<div class="btn-group" data-toggle="buttons">
<% current_user.type_tags.each do |type_tag| %>
<label class="btn btn-primary">
<input name="type<%= type_tag.id %>" id="associated-type-tag-<%= type_tag.id %>" type="checkbox" autocomplete="off">
<%= type_tag.name %>
</input>
</label>
<% end %>
</div>
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>