How to use page/view specific Javascript with Turbolinks in Rails 4?

Question

With Turbolinks enabled, the page keeps all existing JavaScript and loads the new page into the body. If the previous page has JavaScript running with document.ready, this also runs on the new page.

I have a navbar that has the same elements on every page. I would like the navbar to highlight the current page it's on. If I have a controller 'Home' and add to its coffeescript file (using jquery-turbolinks)

$(document).ready ->
    $("#navbarCollapse .nav a:contains('Home')").parent().addClass('active');

This will highlight the "Home" icon on every page I visit. I only want it active when the 'Home' view is rendered.

One solution would be to place that bit of JavaScript in the view. Is there a more elegant solution, so my views don't contain any JavaScript?

Community · Accepted Answer · 2017-05-23 11:58:30Z

1

I don't think you have to do all of this, you can simply do something like that:

<ul class="nav">
  <li class="<%= 'active' if params[:controller] == 'controller1' %>"> <a href="/link">Link</a>    </li>
  <li class="<%= 'active' if params[:controller] == 'controller2' %>"> <a href="/link">Link</a> </li>
  <li class="<%= 'active' if params[:controller] == 'controller3' %>"> <a href="/link">Link</a> </li>        
</ul>

You can also do something much more better by checking this question's answers.

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Oct 12, 2014 at 3:04

Alaa Othman

1,14912 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use page/view specific Javascript with Turbolinks in Rails 4?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related