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>[phone]<br> <b>Email:</b> <br>[email protected]</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.

Aldwin

Answer 1

$(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');
});

Marney

Welcome to StackOverflow! Please, provide an explanation in order to make the given code more understandable – Angwantibo

@Angwantibo Overall, this code snippet is used to dynamically set the active state of sidebar menu items and treeview elements based on the current URL of the webpage. It's commonly used in web applications to highlight the current page or section in the navigation menu for better user experience. – Marney

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');

Merrymerryandrew

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>

Phore

Answer 4

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');
}

Cavafy

Please explain what was causing the issue, and how this answer solves the problem. – Swift