JSF 2.2: output "jsf.js" and "omnifaces.js" manually to body instead of head - jsf

i have a problem with the load-order of javascript-resources in my jsf-project. in my master-template i load all scripts at the bottom of the page:
<h:body>
...
<ui:insert name="scripts">
<h:outputScript name="js/jquery.js" />
<h:outputScript name="js/chart.js" />
<h:outputScript name="js/all.js" />
</ui:insert>
</h:body>
on some pages i use the omnifaces commandscript-tag with a javascript-function defined in all.js:
<o:commandScript name="ALL.selectTypes" action="#{bean.typeSelected}">
i get
ReferenceError: ALL is not defined
the reason is, that at the time jsf.js and omnifaces.js are loaded, all.js isn't loaded yet, because both scripts appear in the head of the document while my own scripts appear at the bottom. when i put my scripts in
<h:head>
instead at the page bottom it works as expected. can i control manually the appearance for these scripts so that they appear like:
<h:body>
...
<ui:insert name="scripts">
<h:outputScript library="javax.faces" name="jsf.js" />
<h:outputScript library="omnifaces" name="omnifaces.js" />
<h:outputScript name="js/jquery.js" />
<h:outputScript name="js/chart.js" />
<h:outputScript name="js/all.js" />
</ui:insert>
</h:body>
the above try doesn't have any effect. jsf.js and omnifaces.js are placed in the head anyway. i also tried with replacing
<h:outputScript>
with
<o:deferredScript>
but can't made it. are there any alternatives? thanks in advance for hints.

You'd better declare ALL namespace in head or perhaps in a general script loaded in head.
<h:head>
...
<script>var ALL = {};</script>
</h:head>
And make sure that all.js itself doesn't override this by another var ALL = {}.
var ALL = ALL || {};

Related

p:dataTable does not render inside carousel and tab components

Environment:
- PrimeFaces version: 5.0
I'm trying to include a p:carousel
in my application, but the p:dataTable appears as a blank in the p:tab view. The following is a simplified example. The facelets template page is:
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet name="./css/default.css"/>
<h:outputStylesheet name="./css/cssLayout.css"/>
<h:outputStylesheet name="./css/style.css"/>
<title>Test Template</title>
</h:head>
<h:body>
<div id="content" class="center_content">
<ui:insert name="content">Content</ui:insert>
</div>
</h:body>
The carousel JSF page:
<body>
<ui:composition template="./ClientNav.xhtml">
<ui:define name="content">
<h:form>
<p:carousel numVisible="1" autoPlayInterval="20000" effect="easeInStrong"
headerText="Contents" style="margin-bottom: 0" circular="true">
<p:tab>
<h1>Heading</h1>
<p>Text of the first tab view</p>
<p:graphicImage name="images/enterBlank.jpg" alt="sky" width="1000" height="252"/>
</p:tab>
<p:tab>
<p:dataTable value="#{topicbean.pubTopList}" var="top">
<p:column>
<p:commandLink value="#{top.topicname}" action="#{topicbean.searchGuestItems}"
ajax="false"/>
</p:column>
</p:dataTable>
</p:tab>
</p:carousel>
</h:form>
</ui:define>
</ui:composition>
</body>
If i replace p:dataTable with h:dataTable it renders perfectly. I also tested an ordinary JSF page (without templating) using the p dataTable and the same problem (no rendering) happened. Finally I tried to strip the carousel component to the bare minimum (in case any setting were causing css conflict):
<p:carousel numVisible="1">
tabs here
</p:carousel>
I'm not sure if this is a bug or I'm missing something in my code or how I'm using the carousel. Would appreciate any guidance. Thank you.

Test if a jsf template facelet content is defined by a template client using ui:define [duplicate]

I am wondering if it is possible to know if ui:insert was defined in the ui:composition.
I know that I can do it using separate ui:param, but just wanted to do it without in order to keep it simple and less error prone.
Example :
Template
...
<ui:insert name="sidebar" />
<!-- Conditionnaly set the class according if sidebar is present or not -->
<div class="#{sidebar is defined ? 'with-sidebar' : 'without-sidebar'}">
<ui:insert name="page-content" />
</div>
...
Page 1
...
<ui:define name="sidebar">
sidebar content
</ui:define>
<ui:define name="page-content">
page content
</ui:define>
...
Page 2
...
<ui:define name="page-content">
page content
</ui:define>
...
ui:param is for me the best way to go. It's just a matter of using it the right way. As a simple example, I define a param here to specify wether there's a sidebar or not. Keep in mind you can define a default insertion definition in the template, so just declare it inside:
template.xhtml
<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">
<ui:insert name="sidebar">
<!-- By default, there's no sidebar, so the param will be present.
When you replace this section for a sidebar in the client template,
the param will be removed from the view -->
<ui:param name="noSideBar" value="true" />
</ui:insert>
<div class="#{noSideBar ? 'style1' : 'style2'}">
<ui:insert name="content" />
</div>
</ui:composition>
Then couple of views here, one using the sidebar and the other with no sidebar. You can test it and see how the style changes in the browser. You'll notice there's no value for #{noSideBar} in the second one, which will evaluate to false in any EL conditional statement.
page1.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets" template="/template.xhtml">
<ui:define name="content">
No sidebar defined? #{noSideBar}
</ui:define>
</ui:composition>
page2.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets" template="/template.xhtml">
<ui:define name="sidebar" />
<ui:define name="content">
No sidebar defined? #{noSideBar}
</ui:define>
</ui:composition>
This way you only need to worry about including the sidebar or not in the client view.

JSF page lost style after partial update

I have some troubles with partial update of jsf 2.0 page.
I have dropdown menu with few choices. Depending on choice I show different page. When I load page first time it shows css and javascript works fine. When I change another option in dropdown menu this part of page which has been re rendered appearing without css and javascript on it doesn't work.
This is example of page itself which I using, template.xhtm and bean are pretty generic therefor I didn't include it.
<ui:composition template="/template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:t="http://myfaces.apache.org/tomahawk"
xmlns:h="http://java.sun.com/jsf/html">
<ui:define name="body">
<h:form>
<h:selectOneMenu value="#{bean.answer}">
<f:selectItems value="#{bean.answers}" />
<f:ajax event="change" render="includeContainer #All" />
</h:selectOneMenu>
</h:form>
<h:panelGroup id="includeContainer">
<h:panelGroup library="primefaces" name="jquery/jquery.js"
rendered="#{bean.answer == 'yes'}">
<ui:include src="answer_yes.xhtml"></ui:include>
</h:panelGroup>
<h:panelGroup rendered="#{bean.asnwer == 'no'}">
<ui:include src="answer_no.xhtml"></ui:include>
</h:panelGroup>
</h:panelGroup>
</ui:define>
</ui:composition>
One important remark regarding template that I use this statement to include css, it's located on remote server and I can't download and place it locally, it's company's policy.
<link href="http://server.com/resources/w3.css" rel="stylesheet" title="w3" type="text/css" />
Thank you in advance for your help.
You can put rendered panel group inside an <h:form id="toberendred"> and re-render this form instead of h:panelGroup.
For proper (JSF way) loading your css file from remote server you can use Omnifaces CDNResourceHandler
In addition you got some serious issues in your code:
Why use #all (fix to lowercase) with additional (includeContainer) selector? , do view source and see that you can't render <ui:include in view source you will see content of both yes and no xhtmls + <h:panelGroup got no attributes library and name...

primefaces galleria sometimes not showing in IE8 and IE9

I'm using a p:galleria (primefaces 3.2) and it works fine in FF and chrome. But sometimes it is not showing in IE9 and IE8 is never showing it.
IE9: When I clear browser cache and reload the page, the gallery is shown correctly. But when I then reload the page, the gallery isn't showing. I need to clear the browser cache and then it is shown again.
Here is the galleria code
<f:view
<ui:composition
<ui:define name="content">
<f:view>
<f:subview id="fleetvehicleinfo">
<h:form
.
.
<p:galleria value="#{vehicleRemarketingDetail.vehicle.Pictures_Set}" var="picture" panelWidth="470" panelHeight="350" frameWidth="110" frameHeight="80" >
<p:graphicImage value="/vehicle/remarketing/image/#{picture.document_id}.jpg" height="350" width="470" />
</p:galleria>
</h:form>
</f:subview>
</f:view>
</ui:define>
Anybody having a clue what is wrong and how I can get it to work?
try to add this in the beginning of your header :
<f:facet name="first">
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
</f:facet>

How to set a define inside other define

I'm developing a web application in jboss, seam, richfaces.
I'm using a template(xhtml) as master page of all others and there i set two insert tags. <ui:insert name="head"/>
<ui:insert name="body"/>
The problem is that in pages that use this master page as template, the <ui:define name="head">...</ui:define> must be defined inside the <ui:define name="body">...</ui:define>.
How can i do this?
Basically, what i want is to do the following:
<ui:define name="body">... <ui:define name="head"> <meta name="title" content="#{something.title}" /> </ui:define> ...</ui:define>
the master page must return : <meta name="title" content="#{something.title}" /> on the <ui:insert name="head"/>
Thanks in advance
I don't think facelets work like that. It compiles and reads the template.
So I think you can just define how many definitions you want and dont care about nesting.
ie:
//In your template.xhtml
<ui:insert name="outer">
BLA BLA BLA
<ui:insert name="inner"/>
BLA BLA BLA
</ui:insert>
And when you want to use this template simply:
<ui:define name="outer">
Here you can overwrite outer (This will probably overwrite inner, not sure, you need to test it)
</ui:define>
<ui:define name="inner">
Or you can ONLY overwrite inner here if you want
</ui:define>
You can use <ui:param> in order to define content on each page. For example
in the template:
<meta name="title" content="#{titleParam}" />
in the page that uses the template:
<ui:param name="titleParam" value="customValueForThisPage" />

Resources