JSF Primefaces - How to highlight the current selected p:menuitem.

Question

I have the below code described for displaying the menu and highlighting the current active menu :

$(document).on("click", "#menu\\:panelMenu li a",function (e) {
    e.preventDefault();
 $('#menu\\:panelMenu li a').removeClass("active");
 $(this).addClass('active');
   });

.active {
    color: #D09d23;
    font-weight: bold;
    background-color : #c7c3c3;
}

 <h:form id="menu">
      <p:menu style="width:100%" id="panelMenu">
         <p:menuitem value="Customer" 
          outcome="/secure/customerdetail.xhtml?customerId=#{controller.customerid}" ajax="false"  id="custMenu"/>
         <p:menuitem value="User" outcome="/secure/userlist.xhtml?customerId=#{controller.customerid}" ajax="false" id="userMenu" />
      </p:menu>
    </h:form>

But when i included the JS code for adding the css class, the navigation the mentioned page fails to happen. I tried using both url and outcome. The highlight of the active menu is happening fine. BUt the navigation to the mentioned url fails to happen.

Kindly let me know what i am missing here.

There are no errors in the console, just that on click of User , the highlight happens but the page is not navigated. — Preethi Rajaraman, Aug 11 '18 at 06:27
here is a solution https://stackoverflow.com/questions/11094429/highlighting-current-page-as-active-link-in-included-navigation-menu/17821614 — Oleksa O., Apr 26 '19 at 12:50

score 4 · Answer 1 · answered Aug 12 '18 at 04:10

The below check of using view.viewId and having a conditional operator to set the styleClass in JSF EL highlighed the current active menu :

<h:form id="menu">
  <p:menu style="width:100%" id="panelMenu">
    <p:menuitem value="Customer" url="/secure/customerdetail.xhtml?customerId=#{controller.customerid}" ajax="false" id="custMenu" styleClass="#{view.viewId.contains('customerdetail') ? 'active' : ''}" />
    <p:menuitem value="User" url="/secure/userlist.xhtml?customerId=#{controller.customerid}" ajax="false" id="userMenu" styleClass="#{view.viewId.contains('userlist') ? 'active' : ''}" />
  </p:menu>
</h:form>

score 0 · Answer 2 · answered Aug 11 '18 at 06:36

0

You should remove the e.preventDefault(); from the javascript function. In the description of the function, it says;

If this method is called, the default action of the event will not be triggered.

answered Aug 11 '18 at 06:36

misman

1,347
3
21
39

Thanks @mismanc . The redirection worked after i removed this JS Func. But the active menu highlight seems to not happen, guess the style is not applied once i redirect to a different url.. Is referring to $(this) correct ? i mean the style is applied when i click the menuitem and before the page navigates, but once the page gets navigated, the style applied is lost.. – Preethi Rajaraman Aug 11 '18 at 06:50
@PreethiRajaraman If you redirect page just give `active` class statically. So no need the javascript function. I don't know, there may be other ways for it. – misman Aug 11 '18 at 20:37
are u saying that i need to just give like styleClass="active" in the ? That wouldnt solve my case, since i need remove the active class on all the other menu items that was clicked earlier, and apply the active style on the current menu item clicked, for highlighting only the current menu item. – Preethi Rajaraman Aug 12 '18 at 02:45
Does your menu exist in every page? Add styleClass="active" appropriate menu item page combination. – misman Aug 12 '18 at 11:00
i have added the answer that worked fine for me above. I used view.viewId and a conditional check to set the styleClass. – Preethi Rajaraman Aug 12 '18 at 17:21

JSF Primefaces - How to highlight the current selected p:menuitem.

2 Answers2