title: Open PrimeFaces Dialog located in another .xhtml file
body: <p>I have a number of questions that are related to each other so the title of question may not be appropriate. Sorry for this. </p>
  
  <p>I want to have a <code>p:inputText</code> and <code>p:commandButton</code> in a <code>p:dialog</code> such that when the user presses that button or presses <kbd>enter</kbd> key the value entered in the 
  <code>p:inputText</code> will be saved in the database. To do this I followed this example <a href="http://www.primefaces.org/showcase/ui/dialogForm.jsf" rel="nofollow noreferrer">http://www.primefaces.org/showcase/ui/dialogForm.jsf</a>  and it worked fine when I tried it in a seperate .xhtml file in which there were no other dialogs or command buttons.</p>
  
  <pre><code>&lt;h:body&gt;
   &lt;h:form id="form"&gt; 
  &lt;p:commandButton id="showDialogButton" type="button" value="Show" onclick="PF('dlg').show()" /&gt;  
  
  &lt;p:dialog header="Enter FirstName" widgetVar="dlg" resizable="false"&gt;  
  
  
          &lt;h:panelGrid columns="2" style="margin-bottom:10px"&gt;  
              &lt;h:outputLabel for="firstname" value="Firstname:" /&gt;  
              &lt;p:inputText id="firstname" value="#{subjectController.attributeValue}" /&gt;  
          &lt;/h:panelGrid&gt;  
  
          &lt;p:commandButton id="submitButton" value="Submit" update=":form:display :form:firstname" action="#{subjectController.saveUpdateSubjectAttributeValue}" oncomplete="PF('dlg').hide();"/&gt;  
               &lt;p:defaultCommand target="submitButton"&gt;&lt;/p:defaultCommand&gt; 
  
  &lt;/p:dialog&gt;  
  
  &lt;p:outputPanel id="display" style="display:block;margin-top:10px;"&gt;  
      &lt;h:outputText id="name" value="Hello #{subjectController.attributeValue}" rendered="#{not empty subjectController.attributeValue}"/&gt;  
  &lt;/p:outputPanel&gt;
   &lt;/h:form&gt;
  &lt;/h:body&gt;
  </code></pre>
  
  <p>The .xhtml file that I originally have contains a number of other dialogs and command buttons. When i used the same code in that file it does not work properly. By not working properly I mean to say that  when enter key or submit button is pressed the value entered by the user is not set in the corresponding setter of the inputText in the managed bean. To call the setter before pressing the enter key or button I need to use <code>p:ajax</code> inside <code>p:inputText</code> tag. I tried to use <code>p:ajax</code> events such as "<code>mouseout</code>", "<code>blur</code>", "<code>change</code>" etc. They work for the submit button but not for the enter key. Then I tried "<code>keypress</code>" and "<code>keyup</code>" etc. They worked for both but the setter for the value in the <code>p:inputText</code> was called on each key press which was not desired. </p>
  
  <p><strong>My first question:</strong> </p>
  
  <p>If the sample code is working fine in a separate file why doesn't it work when I have other dialogs or commandbuttons in the same file. In both the cases I am using the same managed bean. What is the difference?</p>
  
  <p>Assuming that the problem may be caused using more than one dialogs in the same file, I thought of declaring these dialogs in separate files such that I have 
  <code>A.xhtml</code> , <code>B.xhtml</code>, <code>C.xhtml</code> pages which contain the actual content and whenever I need to open a dialog the required dialog is located in file such as <code>dialog.xhtml</code>. Being a beginner in JSF, Primefaces and Ajax I was confused about how to do this. Searching on the internet I found this post relevant <a href="https://stackoverflow.com/questions/16541162/primefaces-dialog-lazy-loading-dynamic-true-does-not-work">PrimeFaces dialog lazy loading (dynamic=&quot;true&quot;) does not work?</a>. But in this case, <code>p:dialog</code> is located on the same page but the content contained in this dialog is located in another file which is included using <code>ui:include</code>. I tried this but it shows the same behavior. </p>
  
  <p><strong>My Second Question:</strong>
  Is there any way to programmatically open a dialog from another file e.g. if I have a <code>p:commandButton</code> in <code>A.xhtml</code> and <code>p:dialog</code> in the same file I can do this using </p>
  
  <pre><code>&lt;p:commandButton id="submitButton" value="Submit" update=":form:display :form:firstname" action="#{subjectController.saveUpdateSubjectAttributeValue}" oncomplete="PF('dlg').hide();"/&gt;  
  </code></pre>
  
  <p>and in the corresponding subjectController I have </p>
  
  <pre><code>saveUpdateSubjectAttributeValue(){
      RequestContext context = RequestContext.getCurrentInstance(); 
                  context.openDialog("openDialog");
                  // or 
                  context.execute("openDialog");
  }
  </code></pre>
  
  <p>But what if the "<code>openDialog</code>" is located in <code>B.xhtml</code>? </p>
  
  <p>What I understand, I can use enclose <code>p:dialog</code> in a <code>ui:composition</code> (in <code>B.xhtml</code>) and and use <code>ui:include</code> in <code>A.xhtml</code>. But I am confused in how and where to call <code>openDialog.open()</code> or <code>openDialog.hide()</code>? </p>