Links in the menu do not work with Javascript - Primefaces

Asked

Viewed 109 times

1

I have a file called Menu.xhtml which has the entire menu structure of my project. However, clicking on any link in the menu does not open the destination page, the function of expanding and leaving selected the menu link which the user click and made through a file in java scripts that I found on the internet. (follows the link from where I got the template and features: https://github.com/rmnresende/layout-primefaces-patagonia)

With this I don’t know if the error is in this file called: app.js or in my Menu.xhtml file.

OBS: I discovered that if I remove this style [ styleClass="aw-item-link" ] link works but loses the function of java script.

View the codes:

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');
               
	}
}

javascript primefaces xhtml

  • If links that expand menus do not have the attribute href="#", just put on them. Take a look at my answer.

2 answers

0

You are making a bind on all links with the class .aw-item-link and making a event.preventDefault():

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

The event.preventDefault(); will cancel the direction of the clicked link. Soon, this Event Handler should only be used in links that will expand menus, but the class .aw-item-link is present in all links. Change the selector to pick only the links that contain the attribute href="#":

$('.aw-item-link[href="#"]').bind('click', function(event) {
   event.preventDefault();
   expandirRecolherItensDoMenu(event);
});

Another way would be to remove the class .aw-item-link links (except those that expand menus), if this does not prejudice their stylisation.

Solution 2: Adding another class

You can add a second class only in the links that expand the menus. For example, the class .expandir, being like this:

<h:link styleClass="aw-item-link expandir" ><i class="fa fa-fw fa-plus-square"></i>Cadastros <i class="fa fa-fw fa-angle-left pull-right"></i></h:link>

And change the dial on .bind:

$('.aw-item-link.expandir').bind('click',...

With this, only the links that have the two classes will be affected. Links that have only the class .aw-item-link will be ignored.

  • I removed the .aw-item-link of the links, almost worked out only the link that click stay selected and expanded, because the way it was after clicking the link it opens the page but the menu goes back to normal...

  • I added another solution to the answer. See.

  • I couldn’t see the code on the link you sent

  • Just put a class as I said in the reply, and change the bind selector using this class.

  • I appreciate your patience and trying to help but I couldn’t.. I don’t understand which bind selector I have to change..

  • You’re gonna trade $('.aw-item-link').bind( for $('.aw-item-link.expandir').bind(

  • I imagine it should be run for you day to day, but we can schedule about 10 minutes for you to access my workstation and see where I’m going wrong?

Show 2 more comments

0

I did it, right?

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) {
        event.preventDefault();
        expandirRecolherItensDoMenu(event);
    });
    
    $('.aw-item-link.expandir').bind('click', function (event) {
        event.preventDefault();
        expandirRecolherItensDoMenu(event);
    });
});

xhtml menu.

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

            <li>
                <h:link styleClass="aw-item-link.expandir" ><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  outcome="/sistema/computador" styleClass="aw-item-link"><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>.....

Browser other questions tagged javascript primefaces xhtml

You are not signed in. Login or sign up in order to post.