title: JSF 2.0 Update a primefaces dialog not working the first time
body: <p>I have a simple form that asks the user to input a text. Then when the user clicks the link, a dialog is showed with the value entered by the user. The first issue I have is that the dialog does not show.</p>
  
  <p>The other issue concerns the update. When the form is displayed for the first time, the HTML code is correct and the current value of <code>#{dialogBean.location}</code> is empty. </p>
  
  <p>Then I click on the link, the HTML code is "wrong". That's why I guess it does not show:</p>
  
  <pre><code>&lt;form id="dialogForm" name="dialogForm" method="post" action="/tcmt-component/dialog.xhtml" enctype="application/x-www-form-urlencoded"&gt;
  &lt;input type="hidden" name="dialogForm" value="dialogForm"&gt;
  &lt;input type="hidden" autocomplete="off" value="-6424900608015567042:-9068630845666043913" id="javax.faces.ViewState" name="javax.faces.ViewState"&gt;&lt;/form&gt;
  </code></pre>
  
  <p>In the mean time, I check the return of the Ajax call. The value of <code>#{dialogBean.location}</code> is still empty.</p>
  
  <pre><code>&lt;?xml version='1.0' encoding='UTF-8'?&gt;
  &lt;partial-response&gt;&lt;changes&gt;&lt;update id="dialogForm:dialog"&gt;&lt;![CDATA[&lt;div id="dialogForm:dialog" style="display:none" title="Dialog"&gt;  
          Current Location:
  </code></pre>
  
  <p>I click again on the link and this time the value of <code>#{dialogBean.location}</code> is set to the correct value.</p>
  
  <pre><code>&lt;?xml version='1.0' encoding='UTF-8'?&gt;
  &lt;partial-response&gt;&lt;changes&gt;&lt;update id="dialogForm:dialog"&gt;&lt;![CDATA[&lt;div id="dialogForm:dialog" style="display:none" title="Dialog"&gt;  
          Current Location: MyLocation
  </code></pre>
  
  <p>The Bean:</p>
  
  <pre><code>@ManagedBean
  @SessionScoped
  public class DialogBean implements Serializable {
  
      private String location;
  
      public void setLocation(String location) {
          this.location = location;
      }
  
      public String getLocation() {
          return location;
      }
  
  }
  </code></pre>
  
  <p>The View:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&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:f="http://java.sun.com/jsf/core"      
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:p="http://primefaces.prime.com.tr/ui"&gt;
  
    &lt;h:head&gt; 
    &lt;/h:head&gt;
      &lt;h:body&gt;
          &lt;h:form id="initForm"&gt;
  
          &lt;h:inputText id="location" value="#{dialogBean.location}" /&gt;
          &lt;p:commandLink update="dialogForm:dialog" onclick="dlg.show()"&gt;  
              &lt;h:outputText value="Show Dialog" /&gt;  
          &lt;/p:commandLink&gt;
  
          &lt;/h:form&gt;  
  
          &lt;h:form id="dialogForm"&gt;
          &lt;p:dialog id="dialog" header="Dialog" widgetVar="dlg" resizable="false"&gt;  
          Current Location: &lt;h:outputText value="#{dialogBean.location}" /&gt;
          &lt;p:commandButton value="Close" oncomplete="dlg.hide();"/&gt;
          &lt;/p:dialog&gt;
          &lt;/h:form&gt;  
      &lt;/h:body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>SOLUTION</strong></p>
  
  <p>It seems that it's a primefaces issue updating a dialog. Instead I wrapped the dialog inside a panel and the update works:</p>
  
  <pre><code>&lt;p:dialog header="Dialog" widgetVar="dlg" resizable="false"&gt;  
  &lt;p:outputPanel id="dialogPanel"&gt;
  Current Location: &lt;h:outputText value="#{dialogBean.location}" /&gt;
      &lt;h:form id="dialogForm"&gt;
  &lt;p:commandButton value="Close" oncomplete="dlg.hide();"/&gt;
  &lt;/h:form&gt;  
  &lt;/p:outputPanel&gt;
  &lt;/p:dialog&gt;
  
  &lt;h:form id="initForm"&gt;
  &lt;h:inputText id="location" value="#{dialogBean.location}" /&gt;
  &lt;p:commandLink update="dialogPanel" onclick="dlg.show()"&gt;  
      &lt;h:outputText value="Show Dialog" /&gt;  
  &lt;/p:commandLink&gt;
  &lt;/h:form&gt;
  </code></pre>