Changing Current Tab in Rails

Changing Current Tab in Rails

You can use controller.class == and controller.action_name == to figure out exactly which controller and action you are on

so it would be something like

<li class="<%= controller.class == ProviderController and controller.action_name == 'show' ? 'current' : '' %>"><%= link_to "Home", provider_path(current_user.id), :method=> "GET"%> </li>
<li class="<%= controller.class == StudentController and controller.action_name == 'edit' ? 'current' : '' %>"><%= link_to "Edit Profile", edit_student_path(current_user.id) %> </li>
<li class="<%= controller.class == ProviderController and controller.action_name == 'search' ? 'current' : '' %>"><%= link_to "Search", provider_search_path %> </li>

I believe there are some ways to get the current url for the page you are on, but then your "active" styling will be dependent on only getting to that action via that path, which may not always be the case depending on the routes, this way will ensure the view shows what is true based on what was actually run, not what the url is in the address bar

Setting the current active tab in a bootstrap menu

You'd have to check the current path and if it matches your link's add an active class to your li.

An easy way would be to compare params[:controller] and params[:action].

For example:

# GET /posts
params[:controller]     => "posts"
params[:action]         => "index"

Here is a "dirty" example. It's better to move it out to some helper:

<ul class="nav nav-pills">

  <li class="<%= 'active' if params[:controller] == 'students' && params[:action] == 'index' %>"><%= link_to 'Students', students_path %></li>

</ul>

Rails 4 - how to designate active tab to first instance of a true condition

First, you don't have to compare to true explicitly using == true. Go straight.

<% if @project.package.has_background_ip %>

Second, why not implement a very simple check in the helper to define which tab should be active and then use that index.
Helper:

# will return 1 if has_background_ip is true
# if not, will return 2 if has_data is true
# if both are false, will return 3 if has_material is true
# return -1 if all are false
def firstActiveTab 
  return case
  when @project.package.has_background_ip
     1
  when @project.package.has_data
     2
  when @project.package.has_material
     3
  else
     -1
  end
end

And then in the view (erb), code will add active class for first tab only, if firstActiveTab method returned 1 (which means has_background_ip is true).

<li class="col-md-2 col-xs-6 <%= 'active' if firstActiveTab == 1 %>" >
  ... first tab content for background_ip...
</li>
<li class="col-md-2 col-xs-6 <%= 'active' if firstActiveTab == 2 %>" >
  ... second tab content for has_data...
</li>

use == 1 for first tab code, == 2 for second, etc.

Bootstrap Active Tab in a Rails View

Turns out it was rendering the same partial. Using ajax to render the view solved this.

The fix:

index.html.haml:

%ul.accordion-tabs
%li.tab-header-and-content
  %a.tab-link.is-active{:href => "/jobs/search?tab=ALL"} All
  .tab-content{:data => { :url => "/jobs/search?tab=ALL&inline=true" }}
    = render partial: 'jobs/list', locals: { jobs: @jobs }
    .loading{style: 'display:none;'}
      = image_tag "spinner.gif"
      %p Loading
- @tabs.each do |tab|
  %li.tab-header-and-content
    %a.tab-link{:href => "/jobs/search?tab=#{tab}"} #{tab.capitalize}
    .tab-content{:data => { :url => "/jobs/search?tab=#{tab}&inline=true" }}
      .loading
        = image_tag "spinner.gif"
        %p Loading

jobs_controller.rb:

if params[:inline]
  render partial: 'jobs/list', locals: { jobs: @jobs }, layout: false
else
  render :index
end

jobs.js.coffee:

$(document).on 'page:change', ->
  $('.accordion-tabs').each (index) ->
    $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show()
  $('.accordion-tabs').on 'click', 'li > a.tab-link', (event) ->
    accordionTabs = undefined
    nextTab = undefined
    if !$(this).hasClass('is-active')
      event.preventDefault()
      accordionTabs = $(this).closest('.accordion-tabs')
      accordionTabs.find('.is-open').removeClass('is-open').hide()
      nextTab = $(this).next()
      nextTab.toggleClass('is-open').toggle()
      accordionTabs.find('.is-active').removeClass 'is-active'
      $(this).addClass 'is-active'
      nextTab.find('.loading').show()
      nextTab.find('.loading p').text 'Loading'
      $.ajax
        url: nextTab.data('url')
        success: (data) ->
          nextTab.html data
          nextTab.find('.loading').hide()
        error: ->
          nextTab.find('.loading p').text 'Error'
    else
      event.preventDefault()

current tab in navigation bar

You could try this just define a methods in application helper and call it by passing the a unique string for each navigation list

 def active_class(css_class)

    if controller.controller_name == css_class ||  css_class == "#{controller.controller_name}##{controller.action_name}" || css_class == inner_classes
       return "active"
    else
      return ""
    end   
  end

  def inner_classes
    pages = {
      "basic_files#new_part_price_file" => "basic_files#index",
      "basic_files#new_market_basket_file" => "basic_files#index",
      "basic_files#create" => "basic_files#index",
      "basic_files#edit"   => "basic_files#index",
      "basic_files#show"   => "basic_files#index",
      "basic_files#uploads"  => "basic_files#index",
      "basic_files#downloadable_part_price_file" => "basic_files#download_page",
      "basic_files#downloadable_market_basket_file" => "basic_files#download_page",
      "basic_files#download_part_price_file" => "basic_files#download_page",
      "basic_files#download_market_basket_file" => "basic_files#download_page",
    }   
    pages["#{controller.controller_name}##{controller.action_name}"]
  end

In the view you could call the above methods like this

<%= link_to 'Home',home_path,:class => "f1 #{active_class('home')}" %>

   <% if current_user.publisher? %>
    <%= link_to 'User',users_path,:class => "f1 #{active_class('users')}" %> 
    <%= link_to 'Upload',basic_files_path,:class => "f1 #{active_class('basic_files#index')}" %>
    <%= link_to 'Publish',publish_completed_basic_files_path,:class => "f1 #{active_class('basic_files#publish_completed')}" %>
    <%= link_to 'Report',audits_path ,:class => "f1 #{active_class('audits')}" %> 

Note it just a example of how you can build automatic navigation highlighting

Rails tab selection

current_page?(url) method can help you.

Create an additional helper method.

module ApplicationHelper
  #...
  def tab_item(name, url)
    opts = {}
    opts[:class] = 'current_page_item' if current_page?(url)
    content_tag :li, opts do
      link_to name, url
    end
  end
  #...
end

And use it in your view

<%= tab_item 'Home', root_path %>
<%= tab_item 'Projects', projects_path %>
<%= tab_item 'Resume', resume_path %>
<%= tab_item 'Contact', contact_path %>

How to redirect to a specific tab if the user get an error in the form?

Actually, when signup failes, you can redirect with tab param:

redirect_to sign_in_path(tab: :sign_up)

And add in your view to signup tab, as you said:

class="<%= 'active' if params[:tab] == :sign_up %>"

sign in tab

class="<%= 'active' if params[:tab] != :sign_up %>"

Highlight tab in menu

The simplest way would be to check which controller is being used. I made up controller names, so of course you would replace 'home', 'calendar', and 'settings' with the correct names.

<ul>
  <li class="<%= "highlighted" if params[:controller] == "home" %>">Home</li>
  <li class="<%= "highlighted" if params[:controller] == "calendar" %>">Calendar</li>
  <li class="<%= "highlighted" if params[:controller] == "settings" %>">Settings</li>
</ul>

---

Related Topics