Search code examples
jspspring-bootjsp-fragments

highlight active menu item, according to current page with jsp/jstl, no javascript


I am currently working on a site that uses jsp and jstl. I like to highlight in the navbar the active tab with an active class used in bootstrap 4, according to the current page, i found many ways (thymeleaf) to get the result, but none with pure jstl and jsp. I came up with this solution:

${ pageContext.request.requestURI.endsWith(' /... ') ? 'active' : " " }

but it doesn't work, the navbar.jspf file is located with the header.jspf in the todo.jsp file. Everything works except of the active tab in the navigation, thanks for help.

The header.jspf looks like this:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Add Todo</title>
  <link rel="stylesheet"href="webjars/bootstrap/4.0.0/css/bootstrap.min.css"/>
</head>
<body>

The navigation.jspf looks like this:

<nav class="navbar navbar-expand-lg navbar-light bg-light border mb-5">
  <a class="navbar-brand p-2" href="#">Navbar</a>

  <button class="navbar-toggler m-2" type="button" data-
      toggle="collapse" data-target="#navbarSupportedContent" aria-
      controls="navbarSupportedContent" aria-expanded="false" aria-
      label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item 
        ${pageContext.request.requestURI.endsWith('/') ? 'active' : 
        ''}">
        <a class="nav-link p-3 " href="/login">Home</span></a>
      </li>
      <li class="nav-item 
          ${pageContext.request.requestURI.endsWith('/list-todos') ? 
          'active' : 
          ''}">
        <a class="nav-link p-3 " href="/list-todos">Todos</a>
      </li>
   </div>
</nav>

The all including todo file looks like this:

  <%@ include file="fragments/header.jspf" %>
  <%@ include file="fragments/navigation.jspf" %>

  <div class="container">
    <h2>Add Todo Page for ${name}</h2>
    ...........
  </div>

Solution

  • Dang, as i supposed. Its possible with defining a modelAttribute in the controller for the specific page. And a jsp variable in the navbar.

    In my case like this:

    @Controller
    @SessionAttributes("name")
    public class LoginController {
    
      @Autowired
      LoginService service;
    
      @RequestMapping(value="/login", method = RequestMethod.GET)
      public String showLoginPage(ModelMap model){
        model.addAttribute("activeLogin", "active");
        return "login";
      }
    }
    

    The Navbar like this:

    <nav class="navbar navbar-expand-lg navbar-light border-bottom mb-5">
      <a class="navbar-brand p-2" href="#">Navbar</a>
      <button class="navbar-toggler m-2" type="button" data-
       toggle="collapse" data-target="#navbarSupportedContent" aria-
       controls="navbarSupportedContent" aria-expanded="false" aria-
       label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
      </button>
    
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav mr-auto">
         <li class="nav-item ${activeLogin}">
           <a class="nav-link p-3 " href="/login">Home</span></a>
         </li>
         .........
       </ul>
      </div>
    </nav>