Skip to main content
2 de 3
adicionou 128 caracteres ao conteúdo

Links no menu não funcionam com Java Script - Primefaces

Eu tenho um arquivo chamado Menu.xhtml o qual tenho toda estrutura do menu do meu projeto. Porém ao clicar em algum link do menu não abre a pagina de destino, a função de expandir e deixar selecionado o link do menu o qual o usuário clicar e feito através de um arquivo em java scripts que encontrei na internet. (segue o link de onde peguei o template e funcionalidades: https://github.com/rmnresende/layout-primefaces-patagonia)

Com isso não sei se o erro esta nesse arquivo chamado: app.js ou no meu arquivo Menu.xhtml.

OBS: descobri que se remover esse style [ styleClass="aw-item-link" ] o link funciona mas perde a função do java script.

Veja o códigos:

Menu.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html">

    <nav class="aw-menu">
        <ul>
            <li>
                <h:link outcome="/sistema/dashboard" styleClass="aw-item-link"><i class="fa fa-fw fa-dashboard"></i>Dashboard</h:link>
            </li>

            <li>
                <h:link styleClass="aw-item-link" ><i class="fa fa-fw fa-plus-square"></i>Cadastros <i class="fa fa-fw fa-angle-left pull-right"></i></h:link>
                <ul class="aw-menu-tree">
                    <li class="subitem"><h:link styleClass="aw-item-link" outcome="/sistema/computador" ><i class="fa fa-fw fa-desktop"></i>Computador</h:link></li>
                    <li class="subitem"><h:link outcome="/sistema/software" styleClass="aw-item-link"><i class="fa fa-fw fa-buysellads"></i>Software</h:link></li>
                    <li class="subitem"><h:link outcome="/sistema/marca" styleClass="aw-item-link"><i class="fa fa-fw fa-copyright"></i>Marca</h:link></li> 
                </ul>
            </li>
            <li>
                <h:link styleClass="aw-item-link"><i class="fa fa-fw fa-users"></i>Colaboradores <i class="fa fa-fw fa-angle-left pull-right"></i></h:link>
                <ul class="aw-menu-tree">
                    <li class="subitem"><h:link outcome="/sistema/colab" styleClass="aw-item-link" ><i class="fa fa-fw fa-user"></i>Colaborador</h:link></li>
                </ul>
            </li>
            <li>
                <h:link styleClass="aw-item-link"><i class="fa fa-fw fa-cog"></i>Licensas <i class="fa fa-fw fa-angle-left pull-right"></i></h:link>
                <ul class="aw-menu-tree">
                    <li class="subitem"><h:link outcome="/sistema/tipoSoftware" styleClass="aw-item-link" ><i class="fa fa-fw fa-copyright"></i>Tipo Software</h:link></li>
                    <li class="subitem"><h:link outcome="/sistema/openLicense" styleClass="aw-item-link" ><i class="fa fa-fw fa-cloud-download"></i>Open License</h:link></li>
                    <li class="subitem"><h:link outcome="/sistema/nf" styleClass="aw-item-link" ><i class="fa fa-fw fa-file-text"></i>Nota Fiscal</h:link></li>
                    <li class="subitem"><h:link outcome="/sistema/computadorSoftware" styleClass="aw-item-link" ><i class="fa fa-fw fa-clipboard"></i>PC + Software</h:link></li>
                </ul>
            </li>
            <li>
                <h:link styleClass="aw-item-link"><i class="fa fa-fw fa-file-text"></i>Lista de IPs <i class="fa fa-fw fa-angle-left pull-right"></i></h:link>
                <ul class="aw-menu-tree">
                    <li class="subitem"><h:link outcome="/sistema/ip" styleClass="aw-item-link" ><i class="fa fa-fw fa-indent"></i>IP</h:link></li>
                    <li class="subitem"><h:link styleClass="aw-item-link" ><i class="fa  fa-fw fa-user-times"></i>Teste Menu</h:link></li>
                </ul>
            </li>
            
            <li>
                <h:link styleClass="aw-item-link"><i class="fa fa-fw fa-pagelines"></i>Agrícola <i class="fa fa-fw fa-angle-left pull-right"></i></h:link>
                <ul class="aw-menu-tree">
                    <li class="subitem"><h:link outcome="/agricola/canaDiaFrente" styleClass="aw-item-link" ><i class="fa fa-fw fa-sun-o"></i>Cana Dia Frente</h:link></li>
                    <li class="subitem"><h:link outcome="/agricola/canaDiaHora" styleClass="aw-item-link" ><i class="fa fa-fw fa-clock-o"></i>Cana Dia Hora</h:link></li>                  
                </ul>
            </li>
            <li>
                <h:link styleClass="aw-item-link"><i class="fa fa-fw fa-bullhorn"></i>Recursos Humano <i class="fa fa-fw fa-angle-left pull-right"></i></h:link>
                <ul class="aw-menu-tree">
                    <li class="subitem"><h:link outcome="/rh/treinamento" styleClass="aw-item-link" ><i class="fa fa-fw fa-sun-o"></i>Treinamento</h:link></li>
                    <li class="subitem"><h:link outcome="/rh/relacaoFuncaoTreinamento" styleClass="aw-item-link" ><i class="fa fa-fw fa-sun-o"></i>Função/Treinamento</h:link></li>
                </ul>
            </li>
        </ul>
    </nav>

</ui:composition>

app.js

$(function() {
    $('.js-toggle').bind('click', function(event) {
        $('.js-sidebar, .js-content').toggleClass('is-toggled');
        event.preventDefault();
    });

    $('.aw-item-link').bind('click', function(event) {
        debugger;
        event.preventDefault();
        expandirRecolherItensDoMenu(event);
    });
});

function expandirRecolherItensDoMenu(event) {

    debugger;

    var linkClicado = event.target;

    // se clicou no icone do link em vez de clicar no link
    if ($(linkClicado).hasClass('fa-fw')) {
        linkClicado = $(linkClicado).parent();
    }

    avaliarQualLiRecolherExpandir($(linkClicado).parent(), linkClicado);
}

function avaliarQualLiRecolherExpandir(liPai, linkClicado) {

    // quando for subitem nao precisa fazer nada
    if (!($(liPai).hasClass('subitem'))) {

        // se nao estiver selecionada, desativa a li que estiver selecionda
        if (!($(liPai).hasClass('is-selected'))) {
            desativarLiSelecionada();
        }
        expandirRecolherMenu(linkClicado, liPai);
    }
}

function expandirRecolherMenu(linkClicado, liPai) {

    $(liPai).toggleClass('is-selected');
    var proximoMenu = $(linkClicado).next('.aw-menu-tree');
    proximoMenu.toggle('1000');
}

function desativarLiSelecionada() {

    var liAtiva = $('.is-selected');

    if (liAtiva.length > 0) {
        var menuExpandido = $(liAtiva).find('.aw-menu-tree');
        menuExpandido.toggle('1000');
        $(liAtiva).removeClass('is-selected');
               
    }
}