I have a navbar, which is showing an unread messages count. The unread count has to go within the navbar text for formatting, so I have used the below:
<li><%= link_to "My Messages #{current_user.mailbox.receipts.where({:is_read => false}).count(:id, :distinct => true).to_s}", conversations_path, class: 'small button' %></li>
How do I add a class to the count? I want to add the bootstrap navbar-unread class.
I can put:
<span class='navbar-nav'><%= current_user.mailbox.receipts.where(:is_read => false).count(:id, :distinct => true).to_s %></span>
...outside the list but then the unread count is not in the right place.
Thanks for any help, can't find an answer anywhere, or at least a better way to do this.
EDITED:
The output I need from the html would look like this:
<li>
<a class="small button" href="/converssations/link">
My Messages<span class="navbar-unread">0</span>
</a>
</li>
So I need to pass a class into a span around the ruby that starts 'current_user.mailbox...etc
It's to show the number of unread messages, which is a small number in the corner of the button.
Maybe this can help you.
Look at ActionView Helpers reference also.
<%= link_to content_tag(:span, "My Messages #{current_user.mailbox.receipts.where({:is_read => false}).count(:id, :distinct => true).to_s}", class: "navbar-nav"), conversations_path, class: "small button" %>
will have output like this
<a class="small button" href="/converssations/link">
<span class="navbar-nav">My Messages Count</span>
</a>
To achieve your mentioned behavior you can pass a block to link_to like this
<%= link_to "#your_link", class: "small button" do %>
My Message <%= content_tag(:span, "1", class: "navbar-unread") %>
<% end %>
Related
I have this form:
= form_tag(path, name: "name") do |f|
= hidden_field_tag "abc", content
= submit_tag "" do
%i.icon.ion-android-sync
As you can see, I am trying to put an Ionicon inside the Form Submit tag.
I've tried a bunch of ways, none of which worked.
With the given example I get an empty button with an approximate width of 3px.
Is it possible to embed a child in a submit_tag? If, how would you go about doing so?
Thanks a lot for each answer!
The short answer is "no". However, you can make a button with type of "submit" that'll do the same thing and allow you to put content in it:
%button{type: "submit"}
%i.icon.ion-android-sync
No the Rails submit helper won't let you do that.
I use a custom submit helper in my app :
# Render a form submit button
# === Params
# +value+:: Value of the input/commit button, used for route constraints
# +text+:: Text for the button
# +:html_options+::
def submit(value=nil, text=nil, html_options={})
text ||= 'Submit'
html_options[:name] ||= 'commit'
html_options[:type] = 'submit'
html_options[:data] ||= {}
html_options[:data][:disable_with] ||= 'Please wait'
html_options[:autocomplete] = "off" # https://github.com/rails/jquery-ujs/issues/357
content_tag(:div, class: 'form-submit-wrapper') do
button_tag(html_options){ block_given? ? yield : text }
end
end
You can just pass whatever HTML you want in a block (sorry this is ERB, I'm not really familiar with HAML)
<%= submit do %>
<i class="icon ion-android-sync"></i>
<% end %>
The first two params are only helpful if you have several submit buttons for your form
<%= submit('preview_action', 'Preview result') do %>
<i class="icon ion-android-sync"></i>
<% end %>
<%= submit('really_do_action', 'Do it for real') do %>
<i class="icon ion-android-sync"></i>
<% end %>
The link_to method is as which is not disabled:-
<%= link_to edit_cabinet_path(object), remote: true, disabled: true do %>
<span class="glyphicon glyphicon-pencil"></span>
<% end %>
but if i do like below which hides the link
<%= link_to edit_cabinet_path(object), remote: true, style: "display:none;" do %>
<span class="glyphicon glyphicon-pencil"></span>
<% end %>
Now the question is how to disable this type of link with block, and whats the reason that second code is working and first is not.
Probably, you are looking for link_to_if. link_to_if makes your link clickable only if your condition pass.
Your code should be something like:
<%= link_to_if false, edit_cabinet_path(object), remote: true do %>
<span class="glyphicon glyphicon-pencil"></span>
<% end %>
To make it dynamic you can call condition that satisfy whether to active or inactive that link, something like:
<%= link_to_if cabinate.active?,
"<span class='glyphicon glyphicon-pencil'></span>".html_safe,
edit_cabinet_path(object), remote: true %>
Hope this answer your question..
Actually there is no disabled attribute available for link_to, only for button_to tag.
For more information please refer here: http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to
In this case, you might want to use link_to_if, please have a look into this: http://apidock.com/rails/v4.2.1/ActionView/Helpers/UrlHelper/link_to_if
I wrote some simple JS to allow you to add disabled: true to link_to method
//this allows us to use html disabled attribute in rails
//to prevent clicking on a disabled link from doing anything
$('a[disabled]').click(function(e){
e.stopImmediatePropagation()
e.preventDefault();
});
link_to_if doesn't work as expected. It only renders the given block when your condition is false as a fallback.
https://apidock.com/rails/ActionView/Helpers/UrlHelper/link_to_if#1589-Passing-a-block-does-not-behave-as-expected
In my case I made a Proc for a given block
<%link_block = Proc.new{%>
<span class="glyphicon glyphicon-pencil"></span>
<%}%>
<%if condition?%>
<%= link_to edit_cabinet_path(object), remote: true, disabled: true, &link_block%>
<%else%>
<%link_block.call%>
<%end%>
How can I make the new_value_path actually be a submit button that creates a new value instead of just refreshing back onto itself?
My current new.html.erb:
<h1>New Value</h1>
<%= render 'form' %>
<%= link_to new_value_path, class: 'btn' do %>
<b><span class="glyphicon glyphicon-plus"</span></b>
<% end %>
I want to keep the class: 'btn' and the span class="glyphicon glyphicon-plus" I think it has something to do with CRUD, but I haven't found an answer that specifically deals with including a class and a span.
I had to solve the answer in the _form itself using f.submit
I am trying to get my nav-tabs styled and working properly. I believe I am not setting up the class="active" the correct way. It sets my first TAB/PAGE active by default, but when I click on either one of my other TABS/PAGES it still Highlights(background-color active) on my first TAB/Page.
How do I configure it to Highlight the active/clicked-on Tab?
This is what I have right now for my code:
<ul class="nav nav-tabs">
<li class="active"><%= link_to "Active Projects", projects_path %></li>
<li><%= link_to "Delinquent Projects", delinquent_projects_path %></li>
<li><%= link_to "Completed/Closed Projects", closed_projects_path %></li>
</ul>
Thanks
When rendering the navbar, you should check current path. If it's, say, "/users", then you highlight "Users" menu item and not others. If it's "/orders", you highlight "Orders". And so on.
Here's a little gem to do this work for you: active_link_to.
active_link_to 'Users', '/users'
# => Users
I think so you need to create a helper like
def active_link_to(text, link)
content_tag(:li, :class => request.fullpath == link ? 'active' : nil) do
link_to text, link
end
end
A simple solution is checking the controller param since every action would have the same active tab.
<li class=<%= params[:controller] == "users" ? "active": "" >
(I may have syntax errors since I'm getting rusty, specially with the quotes).
Every other solution listed here should work too.
GL & HF!
https://github.com/twg/active_link_to
gem 'active_link_to'
Then simplify your code to:
<ul class="nav nav-tabs">
<%= active_link_to "Active Projects", projects_path, :wrap_tag => :li %>
<%= active_link_to "Delinquent Projects", delinquent_projects_path, :wrap_tag => :li %>
<%= active_link_to "Completed/Closed Projects", closed_projects_path, :wrap_tag => :li %>
</ul>
Edit: Didn't notice answer above. At least here's an example :)
I have been trying without much luck to get <%= f.submit %> to appear as the same as my other "buttons", all in a row. I have found this helpful post on modifying the class of f.submit, but realized upon examining its element in browser that it took on the class of input, regardless of which additional classes I added as option parameters, thus restricting its appearance.
Essentially, each of my other buttons has the following form:
<div class="sort-nav">
<ul>
<li><h4><%= link_to "Some stuff", some_link_path %></h4></li>
</ul>
</div>
And I was wondering if there is a way to fit all of these styles compacted into one class, and override that of the input class contained in f.submit. Thanks.
For edification, this button is going to be my "Follow"/Unfollow" button used to create or destroy Relationships, which I first intend to render a _follow_form partial with the following code:
<% if current_user.following?(#course) %>
<%= render 'unfollow' %>
<% else %>
<%= render 'follow' %>
<% end %>
With each of the individual _followpartial looking like the following:
<%= form_for(current_user.relationships.build(followed_id: #course.id)) do |f| %>
<%= f.hidden_field :followed_id %>
<%= f.submit "Follow course" %>
<% end %>
a bit hackish but you can always use js to submit the form so instead of using f.submit, change it to
<div class="sort-nav">
<ul>
<li>
<h4><%= link_to_function "Some stuff", '$(this).closest("form").submit()' %></h4
</li>
</ul>
</div>