Warum lädt ein Funktionsaufruf mit jQuery-Komponenten die xhtml-Seite erneut?

Question

Ich arbeite mit JSF, Primefaces und Bootsfaces. Ich entwickle eine Navigationsleiste und ich muss ein Drop-Menü in Navbar erstellen, aber ich hatte ein Problem mit b:dropmenu Implementierung und ich habe eine andere Lösung.

Mein Problem ist, wenn ich auf Klick in Nombre de usuario die Seite neu geladen, wenn ich mostrarOpcionesUsuario() nennen, aber wenn ich mostrarOpcionesUsuario();-alert('hello!'); ersetzen, das System zeigt alert und nicht aktualisiert die Seite. Ich muss mostrarOpcionesUsuario() aufrufen, ohne die Seite zu aktualisieren.

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

Ist der gleiche Fall, wenn ich alert in mostrarOpcionesUsuario() setzen, wird die Seite nicht neu geladen, sondern Mit der vorherigen mostrarOpcionesUsuario Implementierung wird die Seite neu geladen.

Hilf mir bitte!

Vielen Dank!

Answer 1

fand ich die Lösung:

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

Answer 2

Nun, Sie haben Ihre Frage selbst beantwortet: die BootsFaces <b:navLink> verschiedene Optionen hat zu definieren, was passiert, wenn es angeklickt wird. Einer von ihnen ist das href Attribut, und dieses Attribut wiederum ermöglicht es Ihnen, JavaScript durch einfaches vorangestelltes javascript: aufzurufen.

Eine andere, möglicherweise intuitivere Lösung ist die Verwendung des Handlers onclick anstelle des Handlers onmousedown. Das macht den Trick auch:

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