[SOLVED] Issue with content Loading in Layout

UI Components for JSF
Post Reply
mbeedub
Posts: 93
Joined: 28 Jan 2010, 23:54

02 Feb 2010, 23:23

Hi

I'm trying to use and iFrame to load different content of the center pane in layout. The code below seems to work. For the first two click on the left nav (west pane links), content load in the center pane, but the third (and any subsequent) click always opens a new window regardless of which link is clicked.

Any ideas?

Thanks

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view xmlns="http://www.w3.org/1999/xhtml"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:a="http://richfaces.org/a4j"
   xmlns:s="http://jboss.com/products/seam/taglib"
   xmlns:p="http://primefaces.prime.com.tr/ui"
   xmlns:rich="http://richfaces.org/rich" 
   contentType="text/html">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title></title>
	<link rel="shortcut icon" href="#{request.contextPath}/favicon.ico"/>
	<a:loadStyle src="resource:///stylesheet/theme.xcss"/>
	<a:loadStyle src="/stylesheet/theme.css"/>
	<p:resources />

</head>

<body>   
	<p:layout fullPage="true" widgetVar="mainLayout">  
    	<p:layoutUnit position="north" resizable="false" closable="false">
		    <h:outputText value="North unit content" />
    	</p:layoutUnit>  
      
		<p:layoutUnit position="west" width="250" minSize="150" maxSize="400"> 
			<h:outputText value="West unit content" />  
			<ul>	
				<li><a href="http://www.google.com" target="mainFrame">Top of Page</a></li>
				<li><a href="http://news.bbc.co.uk" target="mainFrame">Content Start</a></li>
				<li><a href="http://www.primefaces.org" target="mainFrame">Footer</a></li>
			</ul>
		</p:layoutUnit>  
		  
		<p:layoutUnit position="east" closed="true" size="200" minSize="150" maxSize="400">  
			<h:outputText value="East unit content" />  
		</p:layoutUnit>  
		  
		<p:layoutUnit position="center"> 
			<iframe scrolling="auto" height="100%" frameborder="0" width="100%" src="http://plugins.jquery.com/project/Layout" name="mainFrame" id="mainFrame" pane="center"></iframe>
		</p:layoutUnit>  		
		
	 	<p:layoutUnit position="south">  
		    <h:outputText value="South unit content" />
		</p:layoutUnit>

  </p:layout> 

</body>
</html>
</f:view>
Last edited by mbeedub on 05 Feb 2010, 14:54, edited 1 time in total.
JBoss EAP 6.4.0 | Mojarra 2.1.28 | PrimeFaces 6.2.3
Top
User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

02 Feb 2010, 23:43

Hi,

I don't know why it happens, but I would manipulate "src" attribute of iframe dynamically. I always does something like per JavaScript. Get iframe by ID and set "src" attribute to proper URL.

- Oleg.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin
Top
cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:
Contact cagatay.civici

04 Feb 2010, 14:38

That is what I would do as well.
Top
mbeedub
Posts: 93
Joined: 28 Jan 2010, 23:54

04 Feb 2010, 19:53

Do you think it's an underlying bug in jQuery layout then?

In terms of the JavaScript approach, there seems to be two options

1) window.frames[iframeName].location = url;

2) document.getElementById(iframeId).src = url;

With option (1) being the most browser compatible.
JBoss EAP 6.4.0 | Mojarra 2.1.28 | PrimeFaces 6.2.3
Top
cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:
Contact cagatay.civici

05 Feb 2010, 11:50

Not sure, the way to find out if it's a jquery plugin bug is to test without it. Nevertheless I'd still go with the javascript approach.
Top
mbeedub
Posts: 93
Joined: 28 Jan 2010, 23:54

05 Feb 2010, 14:53

Thanks.

Have tried this with Javascript. Interestingly the 2nd method works the best/most browser compatibility (even IE6..). So the following seems to be the best way to approach this.

E.g. <a href="#" onclick="document.getElementById('iFrameMain').src = 'http://www.google.com/';">Google</a>

The first method causes issues on Chrome on Windows (but is OK on Mac) i.e. not loading content in iFrame on click, and Safari on Mac (not testing on Windows)... So although it works on some browsers and other posts on the internet say it's more backwardly compatible, the following does not seem to work so well.

E.g <a href="#" onclick="frames['iFrameMain'].location.href='http://www.google.com/';">Google</a>

Not sure either if it's jQuery issue in terms of how it works in layout component but am happy with this approach.

Full code below of a test example that works well from my point of view.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view xmlns="http://www.w3.org/1999/xhtml"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:a="http://richfaces.org/a4j"
   xmlns:s="http://jboss.com/products/seam/taglib"
   xmlns:p="http://primefaces.prime.com.tr/ui"
   xmlns:rich="http://richfaces.org/rich" 
   contentType="text/html">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title></title>
	<link rel="shortcut icon" href="#{request.contextPath}/favicon.ico"/>
	<a:loadStyle src="resource:///stylesheet/theme.xcss"/>
	<a:loadStyle src="/stylesheet/theme.css"/>
	<p:resources />

</head>

<body>   
	<p:layout fullPage="true" widgetVar="mainLayout">  
    	<p:layoutUnit position="north" resizable="false" closable="false">
		    <h:outputText value="North unit content" />
    	</p:layoutUnit>  
      
		<p:layoutUnit position="west" width="250" minSize="150" maxSize="400"> 
			<h:outputText value="West unit content" />  
			<ul>	
				<li><a href="#" onclick="document.getElementById('iFrameMain').src = 'http://www.google.com/';">Google</a></li>
				<li><a href="#" onclick="document.getElementById('iFrameMain').src = 'http://news.bbc.co.uk/';">BBC News</a></li>
				<li><a href="#" onclick="document.getElementById('iFrameMain').src = 'http://www.primefaces.org/';">PrimeFaces</a></li>
			</ul>
		</p:layoutUnit>  
		  
		<p:layoutUnit position="east" closed="true" size="200" minSize="150" maxSize="400">  
			<h:outputText value="East unit content" />  
		</p:layoutUnit>  
		  
		<p:layoutUnit position="center"> 
			<iframe scrolling="auto" height="100%" frameborder="0" width="100%" src="http://plugins.jquery.com/project/Layout" name="iFrameMain" id="iFrameMain" pane="center"></iframe>
		</p:layoutUnit>  		
		
	 	<p:layoutUnit position="south">  
		    <h:outputText value="South unit content" />
		</p:layoutUnit>

  </p:layout> 

</body>
</html>
</f:view>
JBoss EAP 6.4.0 | Mojarra 2.1.28 | PrimeFaces 6.2.3
Top
cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:
Contact cagatay.civici

05 Feb 2010, 15:05

Thanks for sharing the solution.
Top
Post Reply

Return to “PrimeFaces”

  • Information

  • Who is online

    Users browsing this forum: No registered users and 57 guests