When I try to call Richfaces.showModalPanel('id') I am getting Richfaces is not defined javascript error and nothing happening.
In my sample application I have two pages, one is master view and another page is child view. Child view invokes popupPanel in master view using above call. I am not sure what is wrong. Any pointers would be appreciated.
Here are the pages I have:
First page:
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:rich="http://richfaces.org/rich"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:richext="http://java.sun.com/jsf/composite/richext">
<h:head>
<title>Page Title</title>
</h:head>
<h:body>
<ui:include id="nextPageInclude" src="secondpage.xhtml"/>
<rich:popupPanel id="logoutDialogId"
width="300"
height="50"
autosized="true"
resizeable="false"
moveable="true"
modal="true"
style="border:5px solid #5e81ac; background-color:#dce3ed;">
<h:outputText value="Inside logout window"/>
</rich:popupPanel>
</h:body>
</html>
Second page:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:head/>
<a4j:outputPanel id='headerLinks' layout="block">
<ul id="sddm">
<li>
</li>
<li>
</li>
<li>
<a4j:commandLink id="logoutLinkId"
value="Logout"
onclick="Richfaces.showPopupPanel('logoutDialogId')"
styleClass="linkLogout"/></li>
</ul>
<div style="clear:both"></div>
</a4j:outputPanel>
</ui:composition>
EDIT: Attached loaded JS screenshot
Thank you,
The issue with the above code is that since RichFaces 4.0 we can't make the old calls to open a popupPanel, the way you have written it is obsolete, try this if you may instead:-
<a4j:commandLink id="logoutLinkId"
value="Logout"
onclick="#{rich:component('logoutDialogId')}.show();"
styleClass="linkLogout"/>
And similarly to hide the popupPanel use
<a4j:commandLink id="Close_Modal"
value="Close Logout"
onclick="#{rich:component('logoutDialogId')}.hide();"
styleClass="linkLogout"/>
Remove the <h:head> from the include composition. It doesn't belong there and would possibly corrupt the generated HTML head. The <h:head> should be declared only once throughout the view and preferably only in the master template.
Another possible cause is that you've a Filter which happens to match the URL pattern of resource requests as well which in turn is not doing its job entirely right. Check HTML source which <script> elements are all generated and press F12 in Firebug/Chrome/IE9 and explore the Net (or Network) tab to see what browser has all retrieved as to JS resources.
Update: the object name is RichFaces with the uppercase F, not Richfaces. Fix it as well.
Related
I have 2 basic templates - one with a side menu, and one without - that both ui:include a common page which contains ui:insert tags (templates are largish, so basic example below).
Using Mojarra everything worked ok, but now I have migrated to MyFaces the ui:insert tags are ignored and the content of the related ui:define does not get rendered (i.e. 'Here are my results' is not displayed).
Should I be specifying included-page.xhtml as a template somehow? I tried
<ui:composition template="included-page.xhtml" />
instead of
<ui:include src="included-page.xhtml" />
but lost the CSS.
Hoping someone can suggest a solution :)
Many thanks,
Neil
my-page.xhtml
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
template="/templates/default-template.xhtml">
<ui:param name="title" value="My Title" />
<ui:define name="results">
Here are my results
</ui:define>
</ui:composition>
default-template.xhtml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<title>#{title}</title>
</h:head>
<h:body>
<ui:include src="included-page.xhtml" />
</h:body>
</html>
included-page.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:insert name="results">
</ui:insert>
</ui:composition>
The <ui:include> should have been an <ui:decorate>.
<ui:decorate template="included-page.xhtml" />
But if the included-page.xhtml is by itself not reused elsewhere, I wonder why it isn't just been inlined in the master template instead.
See also:
Difference between ui:composition and ui:decorate in Facelets
What is the real conceptual difference between ui:decorate and ui:include?
I have a requirement to add a button in one of the xhtml component. When a user clicks the button, a new window should open redirecting the user to another xhtml file which is also in the same component project.
This is what I have in my component project,
|->src
|-> main
|->java
|->META-INF
|->faces-config.xml
|->resources
|->components
|->A.xhtml
|->B.xhtml
I need to add a button in A.xhtml file which redirects the user to B.xhtml opening a new window. This component is being used in other projects. I tried commandButton with target=_blank, a new window opens but doesn't redirect to B.xhtml.
I observed that if I use ui:include src="B.xhtml" tag in A.xhtml file, then the content of B appears in A. But couldn't find why it is not able to redirect in a new window. Not sure what I am missing and would like to know how this can be achieved.
#Sanjay you can easily achieve this by using primefaces commandbutton component by setting target as '_blank' and ajax as 'false'.
<h:form prependId="false" id="form" target="_blank" >
<p:commandButton value="Click me to open new url" ajax="false" action="B.xhtml"/>
</h:form>
Hope this helps .
you can't redirect to a component, you have to redirect to a PAGE that contains that component.
imagine you have
application
resources
components
A.xhtml
B.xhtml
pages
page1.xhtml
page2.xhtml
and
page1.xhtml contains component A
page2.xhtml contains component B
page1.xhtml contains
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:p="http://primefaces.org/ui"
xmlns:o="http://omnifaces.org/ui"
xmlns:of="http://omnifaces.org/functions"
xmlns:cc="http://java.sun.com/jsf/composite/components">
<ui:composition template="/WEB-INF/templates/template.xhtml">
<ui:define name="content">
<cc:a value="someValue" foo="someBar"/>
</ui:define>
</ui:composition>
</html>
and A.xtml is
<h:form prependId="false" id="form" target="_blank" >
<p:commandButton value="open" ajax="false" action="page2.xhtml"/>
</h:form>
so, upvote for #Java, since your answer is almost correct, just change action to address a page and not a component in resources
I am using Primefaces 3.3.1. My use case is very simple, after login user will land on his home page.
Home page is displaying a p:layout with west and center portion.
In Firefox 11 and IE 9 this doesn't show up after login button is pressed but if I do a refresh or reload of the page it displays correctly. But in Chrome after login layout is displayed correctly, no need to do manual refresh.
I am not sure why this is not working for Firefox and IE.
home.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<p:layout style="min-width:400px; min-height:200px;">
<p:layoutUnit position="west" size="200" header="Left" resizable="true" closable="false" collapsible="true">
</p:layoutUnit>
<p:layoutUnit position="center">
</p:layoutUnit>
</p:layout>
</h:body>
</html>
Has anyone encountered similar issue?
In Firebug I don't see any errors.
Update:
It seems this is happening because .ui-layout-unit has visibility = hidden. But why?
I had the same problem, however I followed the initial directions from this thread (serializable and config on the web.xml). Finally I added the <form> tag for the main layout.
Useful links:
http://forum.primefaces.org/viewtopic.php?f=3&t=13901&p=76327#p76327
http://forum.primefaces.org/viewtopic.php?f=3&t=22685
I'm trying to incorporate primefaces into my JSF 2.0 web project.
I've recently updated from facelets 1.x to 2.0 and Added primefaces jar to my library folder. Everything is fine except, the way I have my templates structured has a conflict with the primefaces.
my template.xhtml looks like this:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title><ui:insert name="title">MILO</ui:insert></title>
//Css
//js
</h:head>
<h:body class="milo">
<h:form styleClass="miloForm" enctype="multipart/form-data">
<div id="container">
<ui:insert name="header">
<ui:include src="/WEB-INF/templates/header.xhtml"/>
</ui:insert>
<ui:insert name="content">
<!-- include your content file or uncomment the include below and create content.xhtml in this directory -->
</ui:insert>
<ui:insert name="footer">
<ui:include src="/WEB-INF/templates/footer.xhtml"/>
</ui:insert> </div>
</h:form>
</h:body>
And my index.xhtml looked like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="/WEB-INF/templates/base.xhtml">
<ui:define name="content">
<p:editor/>
</ui:define>
Once I have this, the p:editor won't show up. any ideas why? the console won't show me any warnings/errors.
EDIT>>> Found JS Error
In your template.xhtml, you need to replace <head> by <h:head> and <body> by <h:body>. You shouldn't add another ones, that would only result in invalid HTML.
Particularly the <h:head> is mandatory as it allows component libraries like PrimeFaces to auto-include the necessary CSS/JS files by resource dependency injection. The <h:body> is only mandatory whenever you have <h:outputScript> elements with a target="body" so that they will be auto-relocated to the very bottom of the generated HTML <body> element.
Update your concrete problem is caused by a conflict in the manually loaded jQuery library and the one which is auto-included by PrimeFaces. PrimeFaces uses jQuery and jQuery UI under the covers. If you stick to using PrimeFaces, I'd recommend to drop the manually loaded jQuery and use the PrimeFaces-bundled one instead. To cover pages where you don't use PrimeFaces components as well, you can explicitly load PrimeFaces-bundled jQuery for every page by adding the following line to the <h:head>:
<h:outputScript library="primefaces" name="jquery/jquery.js" />
I create a template xhtml file which is like richfaces-showcase main.xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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:a4j="http://richfaces.org/a4j">
<f:view contentType="text/html">
<h:head>
<!-- Mimic Internet Explorer 8 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title>My title</title>
</h:head>
<h:body>
<div id="page">
<ui:insert name="body">
Body content missed
</ui:insert>
</div>
</h:body>
</f:view>
</html>
And in sub page, I defined the "template body", and add an a4j:poll in my sub page, which I want to use to refresh the data every 5 seconds:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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:rich="http://richfaces.org/rich"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<ui:composition template="/templates/main.xhtml">
<ui:define name="body">
<h:form>
<a4j:poll id="poll" interval="5000" enabled="true" action="..." render="poll,grid" />
</h:form>
<h:form>
<h:panelGrid columns="2" width="80%" id="grid">
sorry, details forgot ...
</h:panelGrid>
</h:form>
</ui:define>
</ui:composition>
</html>
But the question is, when I open my sub page with IE8 in the localhost computer, the a4j:poll can refresh data once, and then it never get data again. when I open the sub page with IE6 or IE8 in other computer, it works fine! Can anybody find the reason out? Thanks in advance!!
I change the
<h:head>
<!-- Mimic Internet Explorer 8 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title>My title</title>
</h:head>
to
<h:head>
<!-- Mimic Internet Explorer 7 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>My title</title>
</h:head>
and, it works now... but why?
I got it working with EmulateIE8. But probably when using it in an intranet way IE can be doing things differently.
Check your Browser mode and Document mode (press F12).
I got: IE9 / IE8 standards.