title: JSF/Primefaces span onClick automatically calls Backing Bean
body: <p>I am doing a project in JSF and I ran into the following issue. </p>
  
  <p>When I create the following span:</p>
  
  <pre><code>&lt;ui:composition&gt;
      &lt;div id="header" class="header"&gt;
          &lt;p style="float: right; padding-right: 20px"&gt;
              Welcome, #{infoGet.username} &lt;span class="glyphicon glyphicon-off" style="color: darkred; cursor: pointer;" onclick="#{Login.logout()}" /&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/ui:composition&gt;
  </code></pre>
  
  <p>It calls this method logout()</p>
  
  <pre><code>public void logout() {
      FacesContext.getCurrentInstance().getExternalContext().invalidateSession();
      try {
          FacesContext.getCurrentInstance().getExternalContext().redirect("Landing.xhtml");
      } catch(IOException e) {
          e.printStackTrace();
      }
  }
  </code></pre>
  
  <p>However on page load the onClick inside the span gets automatically called, if I do:</p>
  
  <pre><code>public void logout() {
      FacesContext.getCurrentInstance().getExternalContext().invalidateSession();
  }
  </code></pre>
  
  <p>And refresh the page the session will be invalidated.</p>
  
  <p>Is there a way to call a method "onClick" from a span? I do need it to be a Label so I can properly use the Bootstrap icon elements. I know onClick is usually used for Javascript, but it would seem logical for it to work with JSF.</p>
  
  <p>EDIT with solution by @luiggi-mendoza</p>
  
  <p>Changed the composition to:</p>
  
  <pre><code>&lt;ui:composition&gt;
      &lt;div id="header" class="header"&gt;
          &lt;h:form style="float: right; padding-right: 20px"&gt;
              &lt;h:commandLink action="#{Login.logout()}" styleClass="clearCommand"&gt;
                  &lt;span class="glyphicon glyphicon-off" style="color: darkred; cursor: pointer;" /&gt;
              &lt;/h:commandLink&gt;
          &lt;/h:form&gt;
          &lt;p style="float: right; padding-right: 20px"&gt;
              Welcome, #{infoGet.username}
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/ui:composition&gt;
  </code></pre>
  
  <p>Made clearCommand: </p>
  
  <pre><code>#clearCommand {
      cursor: pointer;
  }
  </code></pre>
  
  <p>Left the login as it was, and everything works out now. </p>