Primefaces open a p:dialog using jQuery

Components, Ajax Framework, Utilities and More.
cgswtsu78
Posts: 53
Joined: 25 Jan 2011, 19:18

12 Mar 2011, 02:21

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?

Code: Select all

<?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: 3266
Joined: 03 Dec 2010, 14:11
Location: Bavaria, DE
Contact:

12 Mar 2011, 04:26

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: http://tandraschko.blogspot.de/

cgswtsu78
Posts: 53
Joined: 25 Jan 2011, 19:18

12 Mar 2011, 08:51

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"):

Code: Select all

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

User avatar
optimus.prime
Prime
Posts: 17586
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

12 Mar 2011, 09:16

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

cgswtsu78
Posts: 53
Joined: 25 Jan 2011, 19:18

12 Mar 2011, 11:22

@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"/>

User avatar
optimus.prime
Prime
Posts: 17586
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

12 Mar 2011, 13:46

Try placing your custom script after body;

Code: Select all

</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.

cgswtsu78
Posts: 53
Joined: 25 Jan 2011, 19:18

14 Mar 2011, 03:22

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

Priya
Posts: 1
Joined: 07 Dec 2011, 20:15

13 Dec 2011, 17:40

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: 8651
Joined: 17 Jun 2010, 13:34
Location: Netherlands

13 Dec 2011, 19:51

Please don't abuse old, not related posts for new questions

Cheers,

Ronald
Ronald van Kuijk
______________________________
PrimeFaces 6.1, PrimeFaces plus 0.0.2 | JbossWildfly 10.1| Mojarra 2.2.13
Fedora 61, Firefox 'most recent'
Read the forum posting rules
Beginners: https://jsf.zeef.com/bauke.scholtz

aniruddhamahato
Posts: 2
Joined: 24 Mar 2015, 17:23

27 Mar 2015, 12:55

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

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 15 guests