Rails Bootstrap Active class with ordering

Question

I'm trying to implement the bootstrap active class to my navigation links but currently it's not working with my ordering in rails. The class is supposed to be applied when the clicked link matches the current URL.

This is the URL when the ordering is set

http://localhost:3000/posts?order=hot

But it's not actually applying the active class, as I'm guessing it's the '?' that's breaking it.

var url = window.location;
// Will only work if string in href matches with location
$('.sorting ul li a[href="'+ url +'"]').parent().addClass('active');

This code doesn't seem to be working with the '?'. From this question here

When you click the link, does it reload the whole page, or is this done dynamically? — Matthew Higgins, Apr 03 '15 at 16:52

Matthew Higgins · Accepted Answer · 2015-04-03T17:04:02.657

1

As you're reloading the whole page (as mentioned in the comment), you could skip the Javascript altogether, and do something in the view like (HAML example, let me know if you need an ERB example);

%li
  %a{href: '#', class: "#{'active' if params[:order] == 'hot'}"} 
    Link text here

This will read the GET parameter (?order=) from the URL, then add the active class to this a tag, if it is set as hot.

The Javascript example in the Bootstrap docs is how you would do it if you were dynamically updating the content.

Edit: and here's the untested ERB version;

<li>
  <a href="#" class="<%= if params[:order] == 'hot' %>active<% end %>">
    Link text here
  </a>
</li>

edited Apr 03 '15 at 17:04

answered Apr 03 '15 at 16:59

Matthew Higgins

588
1
9
22

ERB would be brilliant - you knew it would happen! ;) – Jonathan Apr 03 '15 at 16:59
Have added an example! Let me know how you get on! – Matthew Higgins Apr 03 '15 at 17:05
<%= link_to posts_path(order: :hot), class: "<%= if params[:order] == 'hot' %>active<% end %>" do %> Popular <% end %> – Jonathan Apr 04 '15 at 23:36
That is throwing a huge error in my face. 'index.html.erb:10: syntax error, unexpected '<', expecting keyword_end
^ '

Jonathan

Apr 04 '15 at 23:37

1

Don't use `<%= %>` inside another, use `"#{ }"` instead. `<%= %>` identifies whats inside it as Ruby, so, put simply, it won't nest! – Matthew Higgins Apr 05 '15 at 13:05

Rails Bootstrap Active class with ordering

1 Answers1