Databases
StackOverflow2013
Postsdbo
POProblem with f:ajax in JSF requiring double clicks to execute
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POProblem with f:ajax in JSF requiring double clicks to execute
    text
    copied!<p>I'm having the same issue on a few places and I'm getting fairly frustrated.</p> <p>Whenever I try to trigger an ajax event it always requires two clicks, the first one simply does nothing. </p> <p>I've tried firing the first click and then manually refresh the site but again, nothing happens. It always needs to be two clicks to fire the event.</p> <p>The below code shows a simple loginform using composite. Here the login button requires two clicks to fire.</p> <p><strong>The main body</strong></p> <pre><code>&lt;body&gt; &lt;h:outputScript library="js" name="topMenuJS.js" /&gt; &lt;div class="topMenu"&gt; &lt;f:ajax execute="pageNavForm" render=":currentMainContent"&gt; &lt;h:form id="pageNavForm"&gt; &lt;h:commandLink styleClass="selector" rendered="#{viewErrandsBean.userID.name != null}" action="#{renderHandler.showCreateIssue()}" value="Create errand" /&gt; &lt;h:commandLink styleClass="selector" rendered="#{viewErrandsBean.userID.name != null}" action="#{renderHandler.showIssue()}" value="View errand" /&gt; &lt;h:commandLink styleClass="selector" rendered="#{viewErrandsBean.userID.admin}" action="#{renderHandler.showCreateUser()}" value="Create user" /&gt; &lt;h:commandLink styleClass="lastSelector" action="#{renderHandler.showLogin()}" value="Login" /&gt; &lt;/h:form&gt; &lt;/f:ajax&gt; &lt;div style="clear:both;" /&gt; &lt;/div&gt; &lt;h:panelGroup layout="block" id="currentMainContent"&gt; &lt;h:panelGroup rendered="#{renderHandler.loginPanel}" id="loginPanel" layout="block"&gt; &lt;ui:include src="/content/login/login.xhtml"&gt; &lt;ui:param name="renderID" value=":pageNavForm" /&gt; &lt;/ui:include&gt; &lt;/h:panelGroup&gt; &lt;/h:panelGroup&gt; &lt;/body&gt; </code></pre> <p><strong>And login.xhtml</strong></p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"&gt; &lt;ui:composition&gt; &lt;h:outputStylesheet library="css" name="loginPageCSS.css" /&gt; &lt;h:panelGroup class="centerBox"&gt; &lt;h:form&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt;Username&lt;/td&gt; &lt;td&gt;&lt;h:inputText value="#{viewErrandsBean.loginName}" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Password&lt;/td&gt; &lt;td&gt;&lt;h:inputSecret value="#{viewErrandsBean.loginPass}" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;h:commandButton value="Login" action="#{viewErrandsBean.authenticateUser()}" &gt; &lt;f:ajax execute="@form" render="#{renderID}" /&gt; &lt;/h:commandButton&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/h:form&gt; &lt;/h:panelGroup&gt; &lt;/ui:composition&gt; &lt;/html&gt; </code></pre> <p>Thanks in advance :)</p> <p><strong>-----------EDIT-----------</strong></p> <p>I believe I've found the root of the problem, but I'm not sure how I can fix it or why it is there.</p> <p>The problem with requiring a double click only presents itself after rendering a component with that "Rendered = 'boolean'" attribute. Or even more specific, only after it goes from "Rendered = false", to "Rendered = true".</p> <p>The following code works as intended if rendered is set as true.</p> <pre><code>&lt;h:panelGroup rendered="#{renderHandler.loginPanel}" id="loginPanel" layout="block"&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload