menu highlight

Forum rules
Please note that response time for technical support is within 3-5 business days.
spadovan
Posts: 178
Joined: 05 Jun 2013, 12:04

01 Jun 2017, 08:31

Hi, is it possible to highlight a menu element programmatically ?
I mean i'd like to highlight a specific menu item when i enter directly an url to my application.

Thanks
Primefaces 12.0.2, Wildfly 24.0.1, JDK 11

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

04 Jun 2017, 04:40

You need to add the id of menuitem into Ultima $.cookie. Please try;

Code: Select all

<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function() {
        var $this = PF('me');
        if($this) {
            var pathname = window.location.pathname;
            if(pathname.indexOf('.xhtml') > 0) {
                var activeLink = $this.menulinks.filter('[href^="' + pathname + '"]');
                $this.expandedMenuitems = [];
                $this.clearMenuState();

                var item = activeLink.parent('li');
                $this.addMenuitem(item.attr('id'));
                addParentItems($this, item);
                rc();
            }
        }
    });

    function addParentItems($this, item) {
        if(item) {
            var parent = item.parents('li:first');
            $this.addMenuitem(parent.attr('id'));
            if(!parent.parent('ul').hasClass('ultima-menu')) {
                addParentItems($this, parent);
            }
            else {
                return;
            }
        }
        return;
    }
    //]]>
</script>
//menu.xhtml

Code: Select all

<h:form id="menuform"> 
   ....
   <p:remoteCommand name="rc" update="menuform:menu" />
                                     
   <pu:menu id="menu" widgetVar="me">
    ...
Last edited by mert.sincan on 13 Jun 2017, 10:18, edited 1 time in total.

spadovan
Posts: 178
Joined: 05 Jun 2013, 12:04

08 Jun 2017, 08:09

Thanks Aragorn,

it works, but the first time i enter the page i get a "too much recursion" javascript error.
addParentItems method fails if the menu item has no parent items....
Primefaces 12.0.2, Wildfly 24.0.1, JDK 11

spadovan
Posts: 178
Joined: 05 Jun 2013, 12:04

08 Jun 2017, 08:20

...and it will be nice to have this behaviour directly in the template, maybe piloted by a configuration variable....in order to highlight the menu item depending on the visited page.
Primefaces 12.0.2, Wildfly 24.0.1, JDK 11

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

09 Jun 2017, 10:36

but the first time i enter the page i get a "too much recursion" javascript error.
addParentItems method fails if the menu item has no parent items....
- I think you can add a if-check for this issue in your addParentItems method.
...and it will be nice to have this behaviour directly in the template, maybe piloted by a configuration variable....in order to highlight the menu item depending on the visited page.
- Thanks for the update, but we don't think of adding this feature for now.

spadovan
Posts: 178
Joined: 05 Jun 2013, 12:04

09 Jun 2017, 10:41

I've tryed to add an if-check, but i don't know what to check, could you please write the if-check to provide ?
thank you very much
Primefaces 12.0.2, Wildfly 24.0.1, JDK 11

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

13 Jun 2017, 10:18

Could you please try the following code?

Code: Select all

<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function() {
        var $this = PF('me');
        if($this) {
            var pathname = window.location.pathname;
            if(pathname.indexOf('.xhtml') > 0) {
                var activeLink = $this.menulinks.filter('[href^="' + pathname + '"]');
                $this.expandedMenuitems = [];
                $this.clearMenuState();

                var item = activeLink.parent('li');
                $this.addMenuitem(item.attr('id'));
                addParentItems($this, item);
                rc();
            }
        }
    });

    function addParentItems($this, item) {
        if(item && item.length) {
            var parent = item.parents('li:first');
            $this.addMenuitem(parent.attr('id'));
            if(!parent.parent('ul').hasClass('ultima-menu')) {
                addParentItems($this, parent);
            }
            else {
                return;
            }
        }
        return;
    }
    //]]>
</script>
//menu.xhtml

Code: Select all

<h:form id="menuform"> 
   ....
   <p:remoteCommand name="rc" update="menuform:menu" />
                                     
   <pu:menu id="menu" widgetVar="me">
    ..

spadovan
Posts: 178
Joined: 05 Jun 2013, 12:04

13 Jun 2017, 10:43

Thanks ! it works perfectly.

Simone
Primefaces 12.0.2, Wildfly 24.0.1, JDK 11

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

13 Jun 2017, 12:58

Glad to hear, thanks for the update!

wandyer
Posts: 7
Joined: 15 Dec 2016, 02:09

27 Jun 2017, 05:32

aragorn wrote:
13 Jun 2017, 10:18
Could you please try the following code?

Code: Select all

<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function() {
        var $this = PF('me');
        if($this) {
            var pathname = window.location.pathname;
            if(pathname.indexOf('.xhtml') > 0) {
                var activeLink = $this.menulinks.filter('[href^="' + pathname + '"]');
                $this.expandedMenuitems = [];
                $this.clearMenuState();

                var item = activeLink.parent('li');
                $this.addMenuitem(item.attr('id'));
                addParentItems($this, item);
                rc();
            }
        }
    });

    function addParentItems($this, item) {
        if(item && item.length) {
            var parent = item.parents('li:first');
            $this.addMenuitem(parent.attr('id'));
            if(!parent.parent('ul').hasClass('ultima-menu')) {
                addParentItems($this, parent);
            }
            else {
                return;
            }
        }
        return;
    }
    //]]>
</script>
//menu.xhtml

Code: Select all

<h:form id="menuform"> 
   ....
   <p:remoteCommand name="rc" update="menuform:menu" />
                                     
   <pu:menu id="menu" widgetVar="me">
    ..
The line:

Code: Select all

rc();
makes any top-bar item stop working for me, including the main menu button.

If I remove that line, they start working again but the menus are not highlighted anymore when I open the page from a URL.

My menu.xhtml:

Code: Select all

...
<p:remoteCommand name="rc" update="menuform:menu" />

<pu:menu id="menu" widgetVar="me" model="#{menuView.model}" />
...

Post Reply

Return to “Ultima - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests