jQuery fn that adds and removes 'active' class on nav works for stub links but breaks when I link to rails route

Question

I have a simple jquery function that adds and removes the 'active' class to the navigation in the header:

$(document).ready(function () {
  $('ul.right li').click(function() {
    $("ul.right li.active").removeClass("active");
    $(this).addClass('active');
  });
});

So long as my link looks like this, it works:

<li><%= link_to "people", "#" %></li>

But as soon as I change it to:

<li><%= link_to "people", people_path %></li>

It breaks for that one link, but continues to work on the other stub links.

I'm confused.

****************** server output ********************

Started GET "/news" for 127.0.0.1 at 2013-09-15 13:08:45 -0500 Processing by StaticPagesController#news as HTML DEPRECATION WARNING: Relation#all is deprecated. If you want to eager-load a relation, you can call #load (e.g. Post.where(published: true).load). If you want to get an array of records from a relation, you can call #to_a (e.g. Post.where(published: true).to_a). (called from news at /Users/jameson/Documents/projects/jemisonmetals/app/controllers/static_pages_controller.rb:6) Post Load (0.3ms) SELECT posts.* FROM posts ORDER BY created_at DESC Rendered layouts/_wispy.html.erb (0.1ms) Post Load (0.3ms) SELECT posts.* FROM posts ORDER BY created_at DESC LIMIT 5 Rendered static_pages/news.html.erb within layouts/application (2.5ms) Rendered layouts/_header.html.erb (0.2ms) Rendered layouts/_footer.html.erb (0.2ms) Completed 200 OK in 14ms (Views: 12.4ms | ActiveRecord: 0.6ms)

Started GET "/assets/application.css?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/vendor/custom.modernizr.js?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/posts.css?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/foundation_and_overrides.css?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/app.css?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/static_pages.css?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/jquery_ujs.js?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/foundation/foundation.js?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/foundation/foundation.alerts.js?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/foundation/foundation.clearing.js?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/foundation/foundation.cookie.js?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/foundation/foundation.dropdown.js?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/foundation/foundation.forms.js?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/foundation/foundation.joyride.js?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/foundation/foundation.magellan.js?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/jquery.js?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/logo.png" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/wispy.png" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/logo-footer.png" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/foundation/foundation.orbit.js?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/foundation/foundation.reveal.js?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/foundation/foundation.section.js?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/foundation/foundation.topbar.js?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/foundation/foundation.interchange.js?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/foundation/foundation.placeholder.js?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/foundation/foundation.tooltips.js?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/foundation/foundation.abide.js?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/foundation/index.js?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/app.js?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/posts.js?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/static_pages.js?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

Started GET "/assets/application.js?body=1" for 127.0.0.1 at 2013-09-15 13:08:45 -0500

I see the problem:

The active class is added to the li tag briefly, but then the page loads and it disappears. When the stub links are clicked, there is no page refresh, which is why those work.

I have the header code in a _header.html.erb partial and am calling it from the application layout.

We're even more confused? What does your serverside code actually output ? — adeneo
I added the server output, and the file with the jquery is in bold. — reknirt
I was thinking more in the lines of actual HTML, not when the files are loaded and how long it took, but maybe it makes sense to someone ? — adeneo
I see, sorry about that. I just edited my original question at the bottom -- I see what is causing it now, just not sure why. — reknirt
I see what's causing it as well, in the first one the element would look like <a href="#people"></a>, which does not redirect the page, but in the second one you'd get <a href="/url/somelink/people"></a> which does redirect the page. — adeneo

Giannizz Giannizz · Accepted Answer · 2013-09-15T18:08:35

try running rake routes in your console to check if the path people exists and is routed correctly. If not, make the corrections in your routes.rb

Hope this helps!

jQuery fn that adds and removes 'active' class on nav works for stub links but breaks when I link to rails route

1 Answers