title: Primefaces open a p:dialog using Javascript
body: <p>I'm trying to use JavaScript to open the primefaces dialog component when a page loads but I'm unable to get it to open.  My "HERE!" alert gets fires off when the page loads but the component must not be found using the widgetvar property on the client side.  Anyone know the proper reference in JavaScript?</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;ui:composition template="#{layoutBean.registeredTemplate}"&gt;
      &lt;ui:define name="head"&gt;
          &lt;script type="text/javascript"&gt;
              jQuery(document).ready(function(){
                  alert("HERE!");
                  scrapeImagesDlg.show();
              }); 
          &lt;/script&gt;
      &lt;/ui:define&gt;
  
      &lt;ui:define name="content"&gt;
          &lt;p:dialog header="#{bundle['bookmarklet.dialog.HEADER']}" 
                widgetVar="scrapeImagesDlg" 
                modal="true" 
                styleClass="dialog dialog2" 
                draggable="false" 
                resizable="false"
                showEffect="fade" 
                hideEffect="fade" 
                closeListener="#{bookmarklet.close}"
              onCloseUpdate="imageGrid"&gt;
  
          &lt;div class="dialog dialog2"&gt;
              &lt;div class="dialog-top-reg"&gt;&lt;/div&gt;
  
              &lt;div class="dialog-middle-reg"&gt;
                  &lt;div class="close-button"&gt;&lt;h:form&gt;
                      &lt;p:commandButton onclick="scrapeImagesDlg.hide()"/&gt;
                  &lt;/h:form&gt;&lt;/div&gt;
  
                  &lt;h:form id="scrapeFrm"&gt;
                   &lt;p:commandButton onclick="scapeImages()" value="scrape images"/&gt;
  
                   &lt;h:inputHidden id="scrapeURL" value="http://www.freefoto.com/preview/04-01-70?ffid=04-01-70"/&gt;
  
                   &lt;p:remoteCommand name="scapeImages" 
                      process="@this,scrapeURL"
                      actionListener="#{bookmarklet.loadImages}"
                      update="imageGrid"/&gt;
  
                   &lt;p:outputPanel id="imageGrid"&gt;
                      &lt;p:dataGrid var="img" 
                          value="#{bookmarkletBean.imageURLs}" 
                          rendered="#{bookmarkletBean.shouldRender}"
                          columns="1"  
                          rows="1"
                          paginator="true"
                          effect="true" 
                          paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} " 
                          paginatorPosition="bottom"&gt; 
  
                          &lt;p:column&gt;  
                                  &lt;h:panelGrid columns="1" style="width:100%"&gt;
                                          &lt;p:graphicImage value="#{img}" width="100" height="100"/&gt;   
                              &lt;/h:panelGrid&gt;  
                          &lt;/p:column&gt;  
                      &lt;/p:dataGrid&gt;
                   &lt;/p:outputPanel&gt;
                  &lt;/h:form&gt;
              &lt;/div&gt;
              &lt;div class="dialog-bottom-reg"&gt;&lt;/div&gt;
          &lt;/div&gt; 
          &lt;/p:dialog&gt; 
      &lt;/ui:define&gt;
  &lt;/ui:composition&gt;
  </code></pre>