Add Javascript to Application Layout View Page

Question

I need to highlight the link button that relates to the current page.

in apps/views/layouts/application.html.erb:

<ul class="nav nav-tabs">
    <li class="link_style"><a href="/">link1</a></li>
    <li class="link_style"><a href="/about">link2</a></li>
    <li class="link_style"><a href="/posts">link3</a></li>
</ul>

and I plan to add the following to some .js file

$('li.link_style').on('click', function(){
    $(this).addClass('active'); // and then add active class for clicked element.
});

I think this would work well. However, I'm not sure to which .js file I should add the js code. My guess is to /app/views/layouts/application.js.erb Is my approach right?

Which version of Ruby on Rails?

Michelle Tilley
– Michelle Tilley

2012-12-07 02:43:44 +00:00
Commented Dec 7, 2012 at 2:43 — Michelle Tilley
– Michelle Tilley, Commented Dec 7, 2012 at 2:43

Jay Truluck · Accepted Answer · 2012-12-07 15:51:36Z

2

The use of

$('li.link_style').on('click', function(){
   $(this).addClass('active'); // and then add active class for clicked element.
});

will not work though, because the page (and the JS) will be reloaded when the link is clicked. Something more usable may be something like this:

$(document).ready(function() {
  $(".nav li.link_style").each(function(){
    var link = $(this).find($(a));
    if(window.location.pathname == link.attr("href")){
      link.addClass("active");
    }
  });
});

This will loop through all of your li elements in the nav class and compare the path of the current page to the href of the link and then add the class active if they match. You should put something like this in the $(document).ready(function() {} section of your JS file. As for what JS file you add it to, it can be any that is included in the Asset Pipeline (Rails 3.1+) or your application.js as you said.

edited Dec 7, 2012 at 15:51

answered Dec 7, 2012 at 3:17

Jay Truluck

1,51910 silver badges17 bronze badges

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

5 Comments

Maximus S Over a year ago

So the name of the js file doesn't matter?

Maximus S Over a year ago

Do you have to do //= require some_name.js in the application.js?

Jay Truluck Over a year ago

The name does not matter as long as it is included in the asset_pipline if you are using that (which looks to be the case). So the file app/assets/javascripts/my_link_highlighter.js which contains your link highlighting above would need to be required in the application.js file by adding the line //= require my_link_highlighter

Maximus S Over a year ago

How is the js supposed to get invoked in this case?

Jay Truluck Over a year ago

I updated the JS to provide how it is loaded as well, in this case it is on $(document).ready so it will run when the DOM is fully loaded. api.jquery.com/ready

Michelle Tilley · Accepted Answer · 2012-12-07 02:45:17Z

0

If you're using the default setup for a Rails 3.1 or higher application, you can place it in any .js file inside app/assets/javascripts. Be sure to check out the section on asset organization in the Rails Asset Pipeline Guide

answered Dec 7, 2012 at 2:45

Michelle Tilley

159k40 gold badges379 silver badges312 bronze badges

1 Comment

Maximus S Over a year ago

Can you add a little to this? In /app/views/posts, I have like.js.erb that is related to 'like' action in PostsController. So I thought I had to put it in the /app/views/layout directory to be related correctly. If I put it in app/assets/javascripts, do I have to require it from application.js?

Collectives™ on Stack Overflow

Add Javascript to Application Layout View Page

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related