AdminLTE Sidebar Active menu doesn't change dynamically

Question

Bug | Help The jquery just doesn't fire up correctly when I try to change the class on nav-link. Maybe this has been blocked by other js?

I am creating my index.php file which includes once header.php, sidebard.php, and footer.php Some page is called up with condition selected from the sidebar menu. I try to change the active nav-link when another item is clicked and add "active" to the class. But it just doesn't fire up.

Here is the content of my sidebar.php

`

<!-- Sidebar -->
<div class="sidebar">
  <!-- Sidebar Menu -->
  <nav class="mt-2">
    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
      <!-- Add icons to the links using the .nav-icon class
           with font-awesome or any other icon font library -->
      <li class="nav-item">
        <a href="?page=home" class="nav-link">
          <i class="nav-icon fas fa-home"></i>
          <p>
            Home
          </p>
        </a>            
      </li>
      <li class="nav-item">
        <a href="?page=notification" class="nav-link" id="nav-link">
          <i class="nav-icon fas fa-info-square"></i>
          <p>
            Notification
          </p>
        </a>            
      </li>
      <li class="nav-item">
        <a href="?page=important" class="nav-link">
          <i class="nav-icon fas fa-calendar-alt"></i>
          <p>
            Important Dates
          </p>
        </a>            
      </li>
      <li class="nav-item">
        <a href="?page=eligibility" class="nav-link">
          <i class="nav-icon fas fa-badge-check"></i>
          <p>
            Eligibility
          </p>
        </a>            
      </li>
      <li class="nav-item">
        <a href="?page=feestructure" class="nav-link">
          <i class="nav-icon fas fa-money-check-alt"></i>
          <p>
            Fee Structure
          </p>
        </a>            
      </li>
      <li class="nav-item">
        <a href="?page=prospectus" class="nav-link">
          <i class="nav-icon fas fa-file-powerpoint"></i>
          <p>
            Prospectus
          </p>
        </a>            
      </li>
      <li class="nav-item">
        <a href="?page=apply" class="nav-link">
          <i class="nav-icon fas fa-user-plus"></i>
          <p>
            Apply Now
          </p>
        </a>            
      </li>
      <li class="nav-item">
        <a href="?page=notification" class="nav-link">
          <i class="nav-icon fas fa-user-lock"></i>
          <p>
            Applicant Login
          </p>
        </a>            
      </li>
      <li class="nav-item">
        <a href="/admin/" class="nav-link">
          <i class="nav-icon fas fa-user-shield"></i>
          <p>
            Admin Login
          </p>
        </a>            
      </li>          
    </ul>
  </nav>
  <nav class="mt-5">
    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
      <!-- Add icons to the links using the .nav-icon class
           with font-awesome or any other icon font library -->
      <li class="nav-item has-treeview menu-open">
        <a href="" class="nav-link active">
          <i class="nav-icon fas fa-question-circle"></i>
          <p>
           ADMISSION HELPLINE
            <i class="right fas fa-angle-left"></i>
          </p>
        </a>
        <ul class="nav nav-treeview">
          <li class="nav-item">
            <a class="nav-link active">
              <i class="far fa-empty"></i>
              <p><b>Principal Office</b><br>
              <b>Contact:</b> (9:30AM – 4:00PM) <br>+1 1234 567 890<br> <b>Email:</b> <br>someone@somewhere.com</p>
            </a>
          </li>              
        </ul>
      </li>
    </ul>
  </nav>
  <!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->

`

And here is my footer.php which includes the jquery to fire the action.

<!-- script to change the selected active nav-link -->

<script>$(document).ready(function () { 
$('.nav-link').click(function(e) {
$('.nav-link').removeClass('active');        
$(this).addClass("active");

});
});
</script>

Environment

• AdminLTE Version: [e.g. v3.0.4]
• Operating System: [e.g. Microsoft Windows 10]
• Browser (Version): [e.g. Chrome (Latest)]

Am I missing something? Any help me, please.

Answer 1

var url = window.location;
var href = url.href;
let c = href.split("/").length - 3
var afterWithout = href.substr(0, href.lastIndexOf("/"));

if (c == 1) {
    $('ul.nav-sidebar a').filter(function() {
        return this.href == url;
    }).addClass('active');
    // for sidebar menu and treeview
    $('ul.nav-treeview a').filter(function() {
            return this.href == url;
        }).parentsUntil(".nav-sidebar > .nav-treeview")
        .css({
            'display': 'block'
        })
        .addClass('menu-open').prev('a')
        .addClass('active');
} else {
    $('ul.nav-sidebar a').filter(function() {
        return this.href == afterWithout;
    }).addClass('active');
    // for sidebar menu and treeview
    $('ul.nav-treeview a').filter(function() {
            return this.href == afterWithout;
        }).parentsUntil(".nav-sidebar > .nav-treeview")
        .css({
            'display': 'block'
        })
        .addClass('menu-open').prev('a')
        .addClass('active');
}

Answer 2

For Admin LTE 3
If you want to enter urls such as: url/edit/3
This code worked for me:

/*** add active class and stay opened when selected ***/
var url = window.location;

// for sidebar menu entirely but not cover treeview
$('ul.nav-sidebar a').filter(function() {
    if (this.href) {
        return this.href == url || url.href.indexOf(this.href) == 0;
    }
}).addClass('active');

// for the treeview
$('ul.nav-treeview a').filter(function() {
    if (this.href) {
        return this.href == url || url.href.indexOf(this.href) == 0;
    }
}).parentsUntil(".nav-sidebar > .nav-treeview").addClass('menu-open').prev('a').addClass('active');

Answer 3

<script>
  /** add active class and stay opened when selected */
  var url = window.location;
  const allLinks = document.querySelectorAll('.nav-item a');
  const currentLink = [...allLinks].filter(e => {
    return e.href == url;
  });

  if (currentLink.length > 0) { //this filter because some links are not from menu
      currentLink[0].classList.add("active");
      //currentLink[0].closest(".nav-treeview").style.display = "block";
      //currentLink[0].closest(".has-treeview").classList.add("active");
  }
</script>

Answer 4

$(function () {
    var url = window.location;
    // for single sidebar menu
    $('ul.nav-sidebar a').filter(function () {
        return this.href == url;
    }).addClass('active');

    // for sidebar menu and treeview
    $('ul.nav-treeview a').filter(function () {
        return this.href == url;
    }).parentsUntil(".nav-sidebar > .nav-treeview")
        .css({'display': 'block'})
        .addClass('menu-open').prev('a')
        .addClass('active');
});