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>
Related
I have the following in my index:
<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>
<% render partial: 'booksocial', locals: {book: book} %>
</div>
Then in my partial:
<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=I Like BIg Books&Body=I%20saw%20this%20and%20thought%20of%20you!%20 http://books.com/book/<%= 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>
The page is rendering with the dropdown button but it's actually not rendering the dropdown options. Is there something in my code preventing the list from rendering?
Easy answer that I'm surprised no one chimed in with. I'm not actually outputting the partial at the moment.
<%= render partial: 'booksocial', locals: {book: book} %>
Some of my html.erb files are very long. Due to multiple attributes and sometimes conditions.
For example:
<div class="comment-container">
<div class="comments">
<div class="user-info"></div>
<span class="toggle-comments pull-right comment-activity <%= 'hidden' unless #item.comment_threads.size != #item.root_comments.size %>" data-id="<% item.id %>" data-commentid="<% comment.id %>" data-userid="<% user.id %>">
<i class="fa fa-comment-o fa-lg"></i>
</span>
</div>
</div>
What is the best way to format something like this? Should I use a content_tag? Just leave it as is?
You can take <%= 'hidden' unless #item.comment_threads.size != #item.root_comments.size %> and put in on a helper method:
def hidden(item)
'hidden' unless item.comment_threads.size != item.root_comments.size
end
Then in your view you just call your method:
<div class="comment-container">
<div class="comments">
<div class="user-info"></div>
<span class="toggle-comments pull-right comment-activity <%= hidden(#item) %>" data-id="<%= item.id %>" data-commentid="<%= comment.id %>" data-userid="<%= user.id %>">
<i class="fa fa-comment-o fa-lg"></i>
</span>
</div>
</div>
You won't get rid of the whole line, but makes it cleaner.
If you still don't like that long line, you can break the attributes into different lines, something like this:
<div class="comment-container">
<div class="comments">
<div class="user-info"></div>
<span
class="toggle-comments pull-right comment-activity <%= hidden(#item) %>"
data-id="<%= item.id %>"
data-commentid="<%= comment.id %>"
data-userid="<%= user.id %>">
<i class="fa fa-comment-o fa-lg"></i>
</span>
</div>
</div>
I prefer breaking the attributes in new lines, but not everybody likes it, so use the one that you are more comfortable with.
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>
I have following structure:
<% if #uploads%>
<br class="clear" />
<br />
<% #uploads.each do |file| %>
<div class="file_information">
<p><%= file.file_name %></p>
<td class="Chip_info">
Info
</td>
<td class="Pic">
Pic
</td>
<td class="Hist">
Hist
</td>
<td class="Hist2">
His2
</td>
<td class="delete">
<button class="btn btn-mini btn-danger" data-url="<%=file.destroy%>">
<i class="icon-trash icon-white"></i>
</button>
</td>
</div>
<%end%>
<%else%>
<br class="clear" />
<br />
<%end%>
The problem is that while running it, it destroys all objects automatically without me clicking on the button. Is it possible somehow to list uploads and only by clicking on the button, the corresponding upload will be deleted (destroy action will be called) and not all of uploads?
Thanks in advance
edit
I use this example for file upload
He uses followint to delete the file:
model:
"delete_url" => upload_path(self)
view:
<td class="delete">
<button class="btn btn-danger" data-url="{%=file.delete_url%}">
<i class="icon-trash icon-white"></i>
<input type="checkbox" name="delete" value="1">
</td>
So I tried
data-url="<%=file.upload_path(self)%>">
but it doesnt work, so I printed file.upload_path(self) from a controller and got this:
/uploads/%23%3CUploadsController:0xaf61b34%3E
You can create a helper that generates a form containing one button:
def button_to_delete_file(file)
form_tag file_path(file), :method => :delete, :style => "display:inline;" do
button_tag :class => "btn btn-mini btn-danger" do
content_tag :i, " ", :class => "icon-trash icon-white"
end
end
end
And use it like this:
<%= button_to_delete_file(file) %>
In the button
<button class="btn btn-mini btn-danger" data-url="<%=file.destroy%>">
your data_url is not an url. When the file is executed, everything inside <% %> is executed, so file.destroy is called.
Replace file.destroy by the corresponding URL (something that looks like file_destroy_path(id)) and it should work.