Board index JavaServer Faces General Primefaces open a p:dialog using jQuery

Primefaces open a p:dialog using jQuery

Components, Ajax Framework, Utilities and More.

Posts: 53

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?

<?xml version='1.0' encoding='UTF-8'?>
<html xmlns=""
   <ui:composition template="#{layoutBean.registeredTemplate}">
      <ui:define name="head">
         <script type="text/javascript">
      <ui:define name="content">
         <p:dialog header="#{bundle['bookmarklet.dialog.HEADER']}"
              styleClass="dialog dialog2"
              closeListener="#{bookmarklet.close}" onCloseUpdate="imageGrid">
<div class="dialog dialog2">
      <div class="dialog-top-reg"></div>
      <div class="dialog-middle-reg">
      <div class="close-button"><h:form><p:commandButton onclick="scrapeImagesDlg.hide()"/></h:form></div>   
            <h:form id="scrapeFrm">
                <p:commandButton onclick="scapeImages()" value="scrape images"/>
               <h:inputHidden id="scrapeURL" value=""/>
               <p:remoteCommand name="scapeImages" process="@this,scrapeURL" actionListener="#{bookmarklet.loadImages}" update="imageGrid"/>
                  <p:outputPanel id="imageGrid">
                     <p:dataGrid var="img"
                                 rows="1" paginator="true" effect="true"
                                 paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} "
                             <h:panelGrid columns="1" style="width:100%"> 
                                      <p:graphicImage value="#{img}" width="100" height="100"/>   
      <div class="dialog-bottom-reg"></div>

tandraschko PrimeFaces Core Developer

Posts: 3058
Location: Bavaria, DE

Could you try jQuery(window).load(new function() {..?
Always Bet On Prime (+ Extensions)!

Thomas Andraschko
PrimeFaces Developer | PrimeFaces Extensions Founder
Apache OpenWebBeans PMC | Apache DeltaSpike PMC | Apache MyFaces PMC

Personal Blog:

Posts: 53
thanks for the suggestion zoigl, unfortunately it didn't help. I inspected the resulting html source and maybe that will help you see anything here?

It creates the div for the dialog and hides it (I've tried adding an id to the dialog as well):
<div id="j_idt45" style="display:none" title="Add to Your Dreamcatcher">

Here is the script code that gets generated for the dialog (widgetVar="scrapeImagesDlg"):
<script type="text/javascript">jQuery(function() {scrapeImagesDlg = new PrimeFaces.widget.Dialog('j_idt45',{autoOpen:false,minHeight:0,dialogClass:'dialog dialog2',draggable: false,modal: true,resizable:false,show:'fade',hide:'fade',ajaxClose:true,url:'/dreamcatcher/registered/bookmarklet.html',onCloseUpdate:'imageGrid'});});</script>         

Posts: 17239
Location: Cybertron

Set visible option to true, it will then show up automatically when page loads.

Posts: 53 thanks for the feedback. Sometimes I will want the page to show it and sometimes I wont so I want to control it from the client side before the page runs. Is that possible? I've also failed at calling a remote command from the window.load jquery function. My alert gets fired off by the remoteCommand doesn't ever hit my mapped method. If I use a p:commandButton's onclick="scrapeImages()", it will work but I need the page to do it before it loads. Any workarounds for this? Thanks for the help!

jQuery(window).load(new function() {

<p:remoteCommand name="scapeImages" process="@this,scrapeURL" actionListener="#{bookmarklet.loadImages}" update="imageGrid"/>

Posts: 17239
Location: Cybertron

Try placing your custom script after body;

<script type="text/javascript">

So your code will be registered after dialog creating. If it is placed at head, I think you wont have access to scrapeImagesDlg.

Posts: 53
putting the script after the dialog component in the body did work, thanks for the help!

Posts: 1
Hi, Can you tell me how to change opacity of dialog dynamically? Currently the code below updates only the opacity of only the contents of the dialog. the dialog frame as such doesnt go off!

I have been struggling with this for a week now. Please help.

document.getElementById('formTemplate:scpSelDlg').style.filter='alpha(opacity='+opacityVal+')'; /* works in IE */

kukeltje Expert Member

Posts: 8396
Location: Netherlands
Please don't abuse old, not related posts for new questions


Ronald van Kuijk
PrimeFaces 5.2, PrimeFaces plus 0.0.2 | JbossWildfly 8.1| Mojarra 2.2.8
Fedora 21, Firefox 'most recent'
Read the forum posting rules

Posts: 2
can you please suggest me the way to show the dialog box after clicking on primefaces command button.
update the code if possible.


Return to General