Programmatically set active-menuitem

Post Reply
tdevos
Posts: 60
Joined: 29 Mar 2011, 09:12

27 May 2020, 11:27

Hi there,

I've been searching quite a while now and cannot find a solution:
I've implemented a dynamic menu to create the menu of my page. Depending on several parameters, the landing page can be different. Example:
Suppose there's a communications environment in which the menu items are
  • Documents
  • E-mail
  • Pictures
When arriving in the communications environment, the application checks whether there are new e-mails. If so, the user won't arrive on the "Documents" page but on the "E-mails" page.
Mirage uses cookies to restore the menu state based on what the user has chosen previously. So suppose last time (s)he has chosen "Pictures", the result now is that the menu item "Pictures" is marked as active-menuitem but the displayed page is "E-mail".

I was already able to clear the cookies so that no menu item is active, but now I'm trying to activate the correct menuitem. I got most successful by calling

Code: Select all

PF('sidebarMenu').activate($('.custom-active-menuitem').closest('li'));
PF('sidebarMenu').activate($('.custom-active-menuitem').closest('ul').closest('li'));
but since the page is rebuild using ajax, this only works once :-) (.custom-active-menuitem is a class that I set in Java code)

So now I'm puzzled. Can someone please get me in the correct direction? How can I let Mirage show the menu item I choose as active one?

mert.sincan
Posts: 4638
Joined: 29 Jun 2013, 12:38

29 May 2020, 23:00

Hi,

You can add the item's id to cookie using addMenuitem(id) method.

clearMenuState() -> to clear menu states (expanded items)
addMenuitem(id) -> to add active item to cookie
restoreMenuState() -> to get active items from cookie

Best Regards,

tdevos
Posts: 60
Joined: 29 Mar 2011, 09:12

05 Jun 2020, 20:04

Hi,

Thank you for your answer. I tried different scenario's but I don't get satisfying results.
The page is loading through ajax. This script is included at the end of the page (within the part that is refreshed every time):

Code: Select all

<h:outputScript>
   console.info("Clear menu state");
   PF('sidebarMenu').clearMenuState();
</h:outputScript>
My expectation is now that the menu is cleared every time. But it's not. When I select one menu item, the console reports Clear menu state but the menu item stays active. When I select another item, the console reports Clear menu state but the second menu item stays active. Only when I select the same menu item again, the console reports Clear menu state again and no menu item is selected (as expected).

On top of that, the "pinned sidebar" selection is cleared as wel...

So I guess I'll have to call PF('sidebarMenu').clearMenuState; every time I navigate, then just work with the .activate calls also every time the page is reloaded.
It seems to work most of the time but I had hopes that there would be a more elegant solution :-)

mert.sincan
Posts: 4638
Joined: 29 Jun 2013, 12:38

23 Jun 2020, 14:24

Sorry for the delayed response. Please try;

Code: Select all

        <script type="text/javascript">
        //<![CDATA[
    $(function() {
        var widget = PF('sidebarMenu');

        if (widget) {
            widget.clearMenuState();
            
            widget.wrapper.removeClass('layout-wrapper-static layout-wrapper-static-restore');
            var activeMenuItems = widget.jq.find('li.active-menuitem');
            for (var i = 0; i < activeMenuItems.length; i++) {
                var menuitem = activeMenuItems.eq(i);
                menuitem.removeClass('active-menuitem');

                var submenu = menuitem.children('ul');
                if(submenu.length) {
                    submenu.hide();
                }
           }
       }
       
    })
        //]]>
        </script>
<pm:menu widgetVar="sidebarMenu" .../>

Best Regards,

Post Reply

Return to “Mirage - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 6 guests