Ajax Push in top-menu

[diogo.soares]

The menu hangs and crashes, in ajax return. I believe that lack some form of start ripplelink. I've tried putting 'Modena.init();' in onComplete, but not worked.

https://github.com/primefaces/primefaces/issues/550

Code: Select all

<?xml version="1.0" encoding="ISO-8859-1" ?>
<ui:composition
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui">

    <!-- TOPBAR START -->
    <h:form id="formTopMenu">
        <div id="layout-topbar">
            <a id="mobile-menu-button">
                <span class="ButtonLine" id="ButtonLine1"></span>
                <span class="ButtonLine" id="ButtonLine2"></span>
                <span class="ButtonLine" id="ButtonLine3"></span>
            </a>
            <a href="#{applicationParameters}/index.xhtml" id="logo">
                <h:graphicImage name="images/logo.svg" styleClass="Fleft" library="condominio" />
            </a>

            <a id="show-top-menu" class="ShowOnMobile ripplelink"><i class="icon-more_vert" id="active"></i><i class="icon-close DispNone" id="passive"></i> </a>

            <ul id="top-menu">
                <!--
                <li>
                    <a class="ripplelink"><i class="icon-search"></i> <span class="ShowOnMobile">Buscar</span></a>
                    <ul>
                        <li>
                            <a href="#"><i class="icon-search"></i><p:inputText value="{menuUsuarioView.textoPesquisa}"/></a>
                        </li>
                    </ul>
                </li>
                -->
                <ui:fragment id="top-menu_alertas" rendered="#{request.userPrincipal!=null}">
                    <li>
                        <a class="ripplelink"><i class="#{menuUsuarioView.possuiAlerta?'icon-notifications':'icon-notifications_none'}"></i> <span class="Txt">Alertas</span></a>
                        <ul>
                            <li><a href="#{applicationParameters.url}/administracao/mensagens.xhtml"><span class="Blue"><i class="icon-mail Fs30 DispBlock"></i> #{menuUsuarioView.textoMensagens}</span></a></li>
                        </ul>
                    </li>
                </ui:fragment>
                <li>
                    <a href="#" class="ripplelink"><i class="icon-power"></i> <span class="Txt">Sistema</span></a>
                    <ul>
                        <ui:fragment rendered="#{request.userPrincipal==null}">
                            <li><a href="#{applicationParameters.url}/usuario/index.xhtml"><span class="Blue"><i class="icon-vpn_key Fs30 DispBlock"></i> Efetuar login</span></a></li>
                        </ui:fragment>
                        <ui:fragment rendered="#{request.userPrincipal!=null}">
                            <li><a href="#{applicationParameters.url}/logout"><span class="Red"><i class="icon-vpn_key Fs30 DispBlock"></i> Efetuar logout</span></a></li>
                        </ui:fragment>
                    </ul>
                </li>
            </ul>
            <ui:fragment rendered="#{request.userPrincipal!=null}">
                <!-- Se o usuário estiver logado, atualiza os dados da controladora a cada 3 minutos -->
                <p:poll interval="180" listener="#{menuUsuarioView.actionAjaxPush}" update="formTopMenu" />
            </ui:fragment>
        </div>
    </h:form>
    <!-- TOPBAR END -->

</ui:composition>

[mert.sincan]

Thanks for the sample. I think you need to change layout.js.
Please use;

Code: Select all

....     
/* Line 125 */
        //topbar  
        this.topMenu.find('a').click(function(e) { 
            ...

            e.stopPropagation(); // added
            e.preventDefault(); // added
        })
        .on('mouseenter', function() { 
            ....
       });
...

Code: Select all

// in topbar.xhtml
...
       <p:poll interval="180" listener="#{menuUsuarioView.actionAjaxPush}" update="formTopMenu" oncomplete="Modena.init();"/>
...

[diogo.soares]

It does not work. the menu was displayed but the links to 'a:href' were blocked.

[mert.sincan]

the links to 'a:href' were blocked.

Sorry, I saw this bug now. Please try with;
layout.js

Code: Select all

....     
/* Line 125 */
        //topbar  
        this.topMenu.find('a').click(function(e) { 
            ...

            e.stopPropagation(); // added
        })
        .on('mouseenter', function() { 
            ....
       });
...

Code: Select all

// in topbar.xhtml
...
       <p:poll interval="180" listener="#{menuUsuarioView.actionAjaxPush}" update="formTopMenu" oncomplete="Modena.init();"/>
...

[diogo.soares]

I solved adding:

//topbar
this.topMenu.find('.ripplelink').click(function(e) {
...
e.stopPropagation(); // added
e.preventDefault(); // added
})

[mert.sincan]

Glad to hear, Good fix

[diogo.soares]

After upgrading to modena-2.1.2 topmenu crash.
I need invoke Modena.init(); How to fix?

[mert.sincan]

Please try with;

Code: Select all

<pm:menu widgetVar="myMenu" .../>

... oncomplete="PF('myMenu').init();" />