Javascript not executing in rails view partial

Question

I used bootstrap navbar , but I need to change the active class on different nav-item click, but the active class is not being applied/added when other nav-item is clicked , it stays static.

some extract of partial view is->

  <nav class="navbar navbar-expand navbar-light  fixed-top" id="topheader">
    <section class="container d-flex">
      <span class="navbar-brand mb-0 h1 a">Project Manager</span>

      <ul class="navbar-nav mr-auto">
        <li class="nav-item active" id="project-nav" onclick= "change2()">
          <%= link_to "Project", projects_path, class: "nav-link" %>
        </li>
        <li class="nav-item" id="user-nav" onclick= "change()">
          <%= link_to "user", users_path, class: "nav-link" %>
        </li>

      </ul>

so I tried to implement js by writing in application.js , but it didn't work

$(".navbar-nav .nav-item").on("click", function(){
   $(".navbar-nav").find(".active").removeClass("active");
   $(this).addClass("active");
});

I also tried

function change(){
  document.getElementById("project-nav").className.replace(" active", "");
  document.getElementById("user-nav").className += " active ";
}

But the class is not changing- it seems that the onclick event is not being executed at all

have you added on-click function and javascript code in document.ready function? — fidato, Aug 26 '19 at 17:23
Do you get any JavaScript errors? If you add a an alert, do you see that alert when the page loads? Do you find your JavaScript code by view page source and opening the JavaScript file? What happens when you go add a break point in the developer tools -> debugger? — iJK, Aug 26 '19 at 18:11
Have you made sure to require `jquery` and `jquery-ujs` into your application.js file? Your first example won't work unless you do that, and wrap the click listener in a `$(document).ready()` check — NM Pennypacker, Aug 26 '19 at 18:11
yes js is working @iJK I also checked with an alert box which is working — Achy97, Aug 26 '19 at 18:42
@Achy97 Did you try adding a breakpoint in your JS via developer tools? Does it catch? Can you find the class "nav-item" in your page source? I would remove the onclick calls in your HTML. — iJK, Aug 26 '19 at 19:24

Violeta · Accepted Answer · 2019-08-26T20:13:33.067

What is causing the issue is this:

<%= link_to "Project", projects_path, class: "nav-link" %>

and also this:

<%= link_to "user", users_path, class: "nav-link" %>

So, when you click on the nav-item it will actually redirect to projects_path, or users_path, it depends on which link you clicked.

This code:

$(".navbar-nav .nav-item").on("click", function(){
  $(".nav-item").not(this).removeClass('active');
  $(this).addClass("active");
});

Will working if you have this code structure:

<ul class="navbar-nav mr-auto">
  <li class="nav-item"> Project </li>
  <li class="nav-item" > User </li>
</ul>

So, if you want to add the class active only to the active link in the navbar, you can do this:

HTML file:

<nav class="navbar navbar-expand navbar-light  fixed-top" id="topheader">
  <section class="container d-flex">
    <span class="navbar-brand mb-0 h1 a">Project Manager</span>

    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <%= link_to "Project", projects_path, class: "nav-link" %>
      </li>
      <li class="nav-item" >
        <%= link_to "user", users_path, class: "nav-link" %>
      </li>
          .....
     </ul>
  </section>
</nav>

In the JS file:

$(document).on("turbolinks:load", function () {
  $('.nav-item a[href="' + this.location.pathname + '"]').parent().addClass('active');
});

References:

How to get Twitter-Bootstrap navigation to show active link?

https://guides.rubyonrails.org/working_with_javascript_in_rails.html

thank you so much for putting in such an effort, indeed it worked — Achy97, Aug 28 '19 at 03:51
can you please tell how can i make one of my nav item set active when the page loads? — Achy97, Aug 28 '19 at 04:23
It’s my pleasure. This code should do that. When the page loads, it’s supposed to find the .nav-item with anchor tag that has a particular path, and add class .active to the .nav-item. Did you give it a try? — Violeta, Aug 28 '19 at 13:45
Yes, but no item is selected when the page is loaded first, otherwise its working fine @violeta — Achy97, Aug 28 '19 at 13:47

Javascript not executing in rails view partial

1 Answers1