title: Render hidden elements using JSF and AJAX
body: <p>I've been facing some problems using JSF with AJAX to render a table without reloading the whole page every time I submit a form.</p>
  
  <p>When I first run the server, my database is empty, so the page is supposed to show only a form to add books. When user submits the form, a <code>fieldset</code> whith all books is supposed to be rendered. I don't want this <code>fieldset</code> to be shown when database is empty.</p>
  
  <p>This is a simple version of my code (it is just a small form and a table to be refreshed using AJAX):</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="ISO-8859-1" ?&gt;
  &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"
  xmlns:p="http://primefaces.org/ui"&gt;
  
  &lt;h:head /&gt;
  &lt;h:body&gt;
  &lt;h:graphicImage library="img" name="caelum-logo.png"/&gt;
  
  &lt;h:form&gt;
      &lt;p&gt;Book Title:&lt;/p&gt;
      &lt;h:inputText id="title" value="#{livroBean.livro.titulo}" /&gt;
      &lt;h:commandButton value="Add book" action="#{livroBean.addFirstBook}"&gt;
          &lt;f:ajax execute="@form" render="title :addedBooksTable" /&gt;
      &lt;/h:commandButton&gt;
  &lt;/h:form&gt;
  
  &lt;div id="addedBooksTable"&gt;
      &lt;p:fieldset rendered="#{livroBean.numberOfBooks &gt; 0}"&gt;
          &lt;h:dataTable value="#{livroBean.allBooks}" var="book"&gt;
              &lt;h:column&gt;
                  &lt;h:outputText value="#{book.titulo}" /&gt;
              &lt;/h:column&gt;
          &lt;/h:dataTable&gt;
      &lt;/p:fieldset&gt;
  &lt;/div&gt;
  
  &lt;/h:body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And i wanna focus on this part:</p>
  
  <pre><code>&lt;h:commandButton value="Add book" action="#{livroBean.addFirstBook}"&gt;
      &lt;f:ajax execute="@form" render="title :addedBooksTable" /&gt;
  &lt;/h:commandButton&gt;
  </code></pre>
  
  <p>The fieldset and the table inside it are supposed to be hidden when there's no book added to the database, that's why i used <code>&lt;p:fieldset rendered="#{livroBean.numberOfBooks &gt; 0}"&gt;</code>. But I want it to be rendered after I click the <code>commandButton</code>, even if there's nothing at the <code>inputText</code>.</p>
  
  <p>Here's what's happening when I test the code:</p>
  
  <ul>
  <li>if I test the code just as it is with an empty database, the <code>inputText</code> is refreshed (it "erases" what were typed before the submisssion) when I click on the <code>commandButton</code>, but the fieldset is not. I know that the fieldset has a <code>rendered="#{livroBean.numberOfBooks &gt; 0}"</code> and the inputText does not, but the method <code>getNumberOfBooks</code> is called everytime i click the commandButton, that's why I don't get it...</li>
  <li>if I change the <code>f:ajax</code> tag so it ends up like this <code>&lt;f:ajax execute="@form" onevent="click" render="title :addedBooksTable" /&gt;</code>, it solves the problem, but i can realize the screen flashing for a while when I click the <code>commandButton</code>. As far as I know, one of the uses of AJAX is that we don't want the screen flashing when a request is made.</li>
  </ul>
  
  <p>Why is the <code>fieldset</code> rendered only when I use <code>onevent="click"</code>? Should I consider the flashing something normal? Is there a more elegant solution for that?</p>
  
  <p>Thanks!</p>