Prime Community Forum

Posted: **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>

Posted: **12 Mar 2011, 04:26**

Could you try jQuery(window).load(new function() {..?

Posted: **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>

Posted: **12 Mar 2011, 09:16**

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

Posted: **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"/>

Posted: **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.

Posted: **14 Mar 2011, 03:22**

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

Posted: **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 */

Posted: **13 Dec 2011, 19:51**

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

Cheers,

Ronald

Posted: **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.

Prime Community Forum

Primefaces open a p:dialog using jQuery

Primefaces open a p:dialog using jQuery

Re: Primefaces open a p:dialog using jQuery

Re: Primefaces open a p:dialog using jQuery

Re: Primefaces open a p:dialog using jQuery

Re: Primefaces open a p:dialog using jQuery

Re: Primefaces open a p:dialog using jQuery

Re: Primefaces open a p:dialog using jQuery

Re: Primefaces open a p:dialog using jQuery

Re: Primefaces open a p:dialog using jQuery

Re: Primefaces open a p:dialog using jQuery