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
Hello,

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'?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:ui="http://java.sun.com/jsf/facelets"
     xmlns:p="http://primefaces.prime.com.tr/ui"
     xmlns:dc="http://dc.dreamcatcher.com/facelet-taglib">
   <ui:composition template="#{layoutBean.registeredTemplate}">
      <ui:define name="head">
         <script type="text/javascript">
            jQuery(document).ready(function(){
               alert("HERE!");
               scrapeImagesDlg.show();
            });
         </script>
      </ui:define>
      <ui:define name="content">
         <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">
<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="http://www.freefoto.com/preview/04-01-70?ffid=04-01-70"/>
               <p:remoteCommand name="scapeImages" process="@this,scrapeURL" actionListener="#{bookmarklet.loadImages}" update="imageGrid"/>
                  <p:outputPanel id="imageGrid">
                     <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">
                            <p:column> 
                             <h:panelGrid columns="1" style="width:100%"> 
                                      <p:graphicImage value="#{img}" width="100" height="100"/>   
                              </h:panelGrid> 
                          </p:column> 
                       </p:dataGrid>
                    </p:outputPanel>
              </h:form>
      </div>
      <div class="dialog-bottom-reg"></div>
      </div>
         </p:dialog>
      </ui:define>
   </ui:composition>
</html>


tandraschko PrimeFaces Core Developer

Posts: 2161
Location: Bavaria, DE

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

PrimeFaces Extensions: https://github.com/primefaces-extensions
OpenWebBeans: http://openwebbeans.apache.org/
DeltaSpike: http://deltaspike.apache.org/
Personal Blog: http://tandraschko.blogspot.de/


Posts: 53
thanks for the suggestion zoigl, unfortunately it didn't help. I inspected the resulting html source and maybe that will help here...do 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: 15043
Location: Cybertron

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


Posts: 53
@optimus.prime 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() {
alert("images");
scapeImages();
});

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


Posts: 15043
Location: Cybertron

Try placing your custom script after body;

</body>
<script type="text/javascript">
            jQuery(document).ready(function(){
               alert("HERE!");
               scrapeImagesDlg.show();
            });
         </script>


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


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: 6267
Location: Netherlands
Please don't abuse old, not related posts for new questions

Cheers,

Ronald
Ronald van Kuijk
______________________________
PrimeFaces 4.0, PrimeFaces plus 0.0.2 | Jboss 7.2.0 | Mojarra 2.1.18
Fedora 19, Firefox 26.0
Read the forum posting rules
Beginners: http://www.coreservlets.com/JSF-Tutorial/jsf2/


Return to General