Why does a function call with jQuery components reload the xhtml page?

Question

I am working with JSF, Primefaces and Bootsfaces. I am developing a navbar and I must create a dropmenu in navbar, however I had a problem with b:dropmenu implementation and I used another solution.

My problem is when I on click in Nombre de usuario the page reloads if I call mostrarOpcionesUsuario(), but if I replace mostrarOpcionesUsuario(); to alert('hello!');, the system shows alert and doesn't refresh the page. I need to call mostrarOpcionesUsuario() without refreshing the page.

This is my code:

XHTML:

<b:navbar>
    <b:navbarLinks>
        <b:navLink onmousedown= "mostrarOpcionesUsuario(); return false;">
        <div>
            <ul>
                <li>
                    <div>
                        <span>
                            Nombre de usuario
                        </span>
                    </div>
                    <ul class = "ulOpciones">
                        <li>Web Design</li>
                        <li>Web Development</li>
                        <li>Illustrations</li>
                    </ul>
                </li>
            </ul>
        </div>
        </b:navLink>
    </b:navbarLinks>
</b:navBar>

JavaScript:

function mostrarOpcionesUsuario() {
    $(".ulOpciones").css('visibility', function (i, v) {
        if (v == 'hidden') {
            $(".ulOpciones").css({'visibility': 'visible'});
        } else {
            $(".ulOpciones").css({'visibility': 'hidden'});
        }
    });
}

Is the same case if I put alert in mostrarOpcionesUsuario(), the page doesn't reload, but with the previous mostrarOpcionesUsuario implementation, the page reloads.

Help me, please!

Thank you!

Answer 1

I found the solution:

<b:navLink href="javascript:mostrarOpcionesUsuario()">

Answer 2

Well, you've answered your question yourself: the BootsFaces <b:navLink>has several different options to define what happens when it's clicked. One of them is the href attribute, and this attribute in turn allows you to call JavaScript by simply preceding javascript:.

Another, possibly more intuitive solution is to use the onclick handler instead of the onmousedown handler. This does the trick, too:

<b:navLink onclick="mostrarOpcionesUsuario(); return false;">