title: How to load an XHTML page into a dialog in primefaces only when the button is clicked?
body: <p>I need to load an XHTML page inside a dialog in prime-faces when the button is pressed, what i tried so far loads the page immediately inside the main XHTML that i could show using view source in the browser, i just need to load it only in button press. </p>
  
  <p>Things I've tried:</p>
  
  <pre><code>&lt;p:commandButton value="Learn More" style="float:right;"
  onclick="helpDialogVar.show(); return false;" /&gt;
  
  &lt;p:dialog id="basicDialog" header="Learn More"
      widgetVar="helpDialogVar" height="300" width="500" resizable="false"
      position="right" closable="true" closeOnEscape="true" draggable="true"
  &gt;
  &lt;ui:include src="page_to_load_inside_dialog.xhtml"    
          &lt;/p:dialog&gt;
  </code></pre>
  
  <p>Also using iframe:</p>
  
  <pre><code>  &lt;p:commandButton value="Learn More" style="float:right;"
         onclick="helpDialogVar.show(); return false;" /&gt;
  
   &lt;p:dialog id="basicDialog" header="Learn More"
      widgetVar="helpDialogVar" height="300" width="500" resizable="false"
      position="right" closable="true" closeOnEscape="true" draggable="true"
      onHide="jQuery('#someId').hide();" onShow="jQuery('#someId').show();"&gt;
      &lt;h:form prependId="false"&gt;
      &lt;h:outputFormat escape="false"&gt;
      &lt;iframe frameborder="0" align="left" src="page_to_load_inside_dialog.xhtml"
      name="someName" id="someId" scrolling="auto" width="750"
      height="500" marginheight="5" marginwidth="10"&gt;
  &lt;/iframe&gt;
      &lt;/h:outputFormat&gt;
      &lt;/h:form&gt;
  &lt;/p:dialog&gt;
  </code></pre>
  
  <p>any other suggestions?</p>