Switching Present Tab in Rails

Question

Switching Present Tab in Rails

Within my application, I have a set of tabs displayed at the top thanks to a general layout in application.html.erb. Here's how they are structured:

<li class="current"><%= link_to "Home", provider_path(current_user.id), :method=> "GET"%> </li>
            <li><%= link_to "Edit Profile", edit_student_path(current_user.id) %> </li>
            <li><%= link_to "Search", provider_search_path %> </li>

My goal is to dynamically switch the selected tab to the "current" state when its respective page is accessed. So if I click on Edit Profile and land on that page, the tabs should now look like this:

<li><%= link_to "Home", provider_path(current_user.id), :method=> "GET"%> </li>
 <li class="current"><%= link_to "Edit Profile", edit_student_path(current_user.id) %> </li>
  <li><%= link_to "Search", provider_search_path %> </li>

I'm interested in achieving this without resorting to adding JavaScript directly to each displayed page. If there's an alternative approach, what would be the best practice for implementing it in the most efficient way possible?

Appreciate any insight.

ruby-on-rails css dom

Answer 1

Answer №1

To determine the current controller and action, you can use the controller.class == and controller.action_name == methods.

Here is an example:

<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>

Although there are other methods to retrieve the current URL of the page, relying on the actions taken within the view ensures accurate styling based on actual user interaction, rather than just the URL in the address bar.

Answer 2

To determine the current controller and action, you can use the controller.class == and controller.action_name == methods.

Here is an example:

<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>

Although there are other methods to retrieve the current URL of the page, relying on the actions taken within the view ensures accurate styling based on actual user interaction, rather than just the URL in the address bar.

Answer 3

Answer №2

If you want to implement this functionality, consider using the following code snippet:

<li class="<%= controller.controller_path == 'provider' ? 'current' : '' %>"><%= link_to "Home", provider_path(current_user.id), :method=> "GET"%> </li>
<li class="<%= controller.controller_path == 'student' ? 'current' : '' %>"><%= link_to "Edit Profile", edit_student_path(current_user.id) %> </li>
<li class="<%= controller.controller_path == 'search' ? 'current' : '' %>"><%= link_to "Search", provider_search_path %> </li>

Make sure to determine the controller being accessed to control the behavior accordingly.

Answer 4

If you want to implement this functionality, consider using the following code snippet:

<li class="<%= controller.controller_path == 'provider' ? 'current' : '' %>"><%= link_to "Home", provider_path(current_user.id), :method=> "GET"%> </li>
<li class="<%= controller.controller_path == 'student' ? 'current' : '' %>"><%= link_to "Edit Profile", edit_student_path(current_user.id) %> </li>
<li class="<%= controller.controller_path == 'search' ? 'current' : '' %>"><%= link_to "Search", provider_search_path %> </li>

Make sure to determine the controller being accessed to control the behavior accordingly.

Answer 5

Answer №3

Check out the tutorial on TabsOnRails

Answer 6

Check out the tutorial on TabsOnRails

Answer 7

Answer №4

Here's a simple solution:

<%= current_page?(:controller => 'your_controller', :action => 'index') ? 'current' : '' %>

Answer 8

Here's a simple solution:

<%= current_page?(:controller => 'your_controller', :action => 'index') ? 'current' : '' %>

Answer 9

Answer №5

I've created a versatile helper function for handling multiple arguments, making it ideal for nested resources. However, it can also handle a single controller name just like the other solutions.

application-helper.rb:

 def determine_active_state(*links)  
   links.each { |link| return "active" if params[:controller] == link }

application.html.erb:

<li class="<%=determine_active_state('home')%>">...</li>

Alternatively,

Here is an example using HAML with nested resources (will be active for any of the provided controller names):

applcation.html.haml:

%li{:class => determine_active_state('blogs', 'comments')}

Answer 10

I've created a versatile helper function for handling multiple arguments, making it ideal for nested resources. However, it can also handle a single controller name just like the other solutions.

application-helper.rb:

 def determine_active_state(*links)  
   links.each { |link| return "active" if params[:controller] == link }

application.html.erb:

<li class="<%=determine_active_state('home')%>">...</li>

Alternatively,

Here is an example using HAML with nested resources (will be active for any of the provided controller names):

applcation.html.haml:

%li{:class => determine_active_state('blogs', 'comments')}

Answer 11

Answer №6

One possible approach is to pass @current_tab back to the erb from the controller methods when switching pages. This variable can then be used to determine which li element should have the "current" class applied. Another option is to assign a unique attribute or ID to each li element and use your preferred JavaScript framework to dynamically change the classes based on user interaction.

Answer 12

One possible approach is to pass @current_tab back to the erb from the controller methods when switching pages. This variable can then be used to determine which li element should have the "current" class applied. Another option is to assign a unique attribute or ID to each li element and use your preferred JavaScript framework to dynamically change the classes based on user interaction.

Answer 13

Answer №7

While I can't guarantee that this is the absolute best approach, I'm fearless enough to share my solution with you :)

Here are a few sample menu links extracted from my design:

<li class="nav-calendar"><%= menu_link_to 'teachers', 'show_date', 'Calendar', calendar_url  %></li>
<li class="nav-announcements"><%= menu_link_to 'announcements', nil, 'Announcements', announcements_path %></li>

Next, I devised this handy helper function:

def menu_link_to(*args, &block)
  controller = args.shift
  action = args.shift

  if controller == controller_name && (action.nil? || action == action_name)
    if args.third.nil?
      args.push({:class => 'selected'})
    else
      args.third.merge!({:class => 'selected'})
    end
  end

  link_to *args, &block
end

Answer 14

While I can't guarantee that this is the absolute best approach, I'm fearless enough to share my solution with you :)

Here are a few sample menu links extracted from my design:

<li class="nav-calendar"><%= menu_link_to 'teachers', 'show_date', 'Calendar', calendar_url  %></li>
<li class="nav-announcements"><%= menu_link_to 'announcements', nil, 'Announcements', announcements_path %></li>

Next, I devised this handy helper function:

def menu_link_to(*args, &block)
  controller = args.shift
  action = args.shift

  if controller == controller_name && (action.nil? || action == action_name)
    if args.third.nil?
      args.push({:class => 'selected'})
    else
      args.third.merge!({:class => 'selected'})
    end
  end

  link_to *args, &block
end

Answer 15

Answer №8

After some tinkering in the application helper, I managed to get it working smoothly:

def check_current_page(path)
  "active" if current_page?(path)
end

To implement this, simply use the following code snippet:

<li class="<%= check_current_page(root_path)%>"> <%= link_to "Home", root_path %></li>

Answer 16

After some tinkering in the application helper, I managed to get it working smoothly:

def check_current_page(path)
  "active" if current_page?(path)
end

To implement this, simply use the following code snippet:

<li class="<%= check_current_page(root_path)%>"> <%= link_to "Home", root_path %></li>

Switching Present Tab in Rails

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Issue with activation of onClick event in case/switch statement

Troubleshooting: Navbar dropdown menu in AngularJS gets hidden within UI layout

Larger icon graphics

Exploring the possibilities of using AngularJS for AJAX functionality in a Ruby On Rails

Using webpack to load the css dependency of a requirejs module

Creating an efficient login system for my website - where do I start?

Adaptable Bootstrap navigation bar

How can a Bootstrap card be designed with the image positioned at the top left, but adjusting based on different

- Prefixing with -webkit-transform and overlooking z-index

JavaScript Reference for the HTML DOM Style's height property and revert back to the initial style height

Trouble with Alignment in Bootstrap 3 Form

An error is thrown when using less.js

Is there a way to incorporate a background image fadeIn effect for ul using CSS3?

Ensure that the Left and Right menu are fixed in position, while allowing the middle content to be scrollable

I am encountering challenges and confusion with CSS

What is the best way to ensure that when a div is opened, the information to the right does not get pushed down?

The text exceeds the width of the element

The collapsible navbar vanished, where did it go?

Ensuring that nested objects in an absolutely positioned element do not wrap, clear, or stack

Step-by-step guide to making a circular "clip-path" work in both Internet Explorer and Firefox