Primefaces lightBox closes at click on commandLink - jsf-2

It's just a simple Primefaces lightBox I want to use commandLinks in. Unfortunately it simply closes, when I click a commandLink. Is there a way to keep the lightBox open?
Here an example of what my code looks like:
<ui:composition 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.org/ui" template="template.xhtml">
<ui:define name="content">
<p:lightBox>
<h:outputLink value="#">
<h:outputText value="open lightbox" />
</h:outputLink>
<f:facet name="inline">
<h:form>
<h:commandLink>
commandLink
</h:commandLink>
</h:form>
</f:facet>
</p:lightBox>
</ui:define>
</ui:composition>

Use an ajax (asynchronous) request instead of a synchronous request:
<h:commandLink ...>
<f:ajax ... />
</h:commandLink>
or as you're using PrimeFaces already, just use <p:commandLink> instead (it uses by default already ajax):
<p:commandLink ... />
With ajax, by default no fresh page replacement with the response is performed (which basically "resets" anything to defaults). You can in case of <f:ajax> tell by render attribute which parts of the component tree should be updated in the client side and in <p:commandLink> by the update attribute. E.g. if you want to render/update the parent form only, use #form. E.g.
<p:commandLink ... update="#form" />

Related

When placed in ui:composition, p:submenu fades out on click of p:megaMenu and aren't clickable on mouseover

I use the p:megaMenu for menus. p:megaMenu well work without using <ui:composition>.
When i use the p:megaMenu in <ui:composition> , the submenu doesn't work well. When click the megamenu the submenu are faded out and when mouseover the submenu, the menu are faded in and can't click. Why?
Somebody answer me plz.
Here is my 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:p="http://primefaces.org/ui">
<h:form id="menuForm" >
<p:megaMenu autoDisplay="false">
<p:menuitem value="Dashboard" action="dashboard" ajax="false" immediate="true" />
<p:submenu label="home" >
<p:column>
<p:submenu label="Survey Question">
<p:menuitem value="Survey Question" action="manageSurveyQuestion" ajax="false" immediate="true" />
</p:submenu>
</p:column>
</p:submenu>
</p:megaMenu>
</h:form>
</ui:composition>
Is there any template file? It is missing template in ui:composition tag.
<ui:composition .... template="/yourtempalte.xhtml">
<ui:define name="xxxx"> <--- It is optional
</ui:define>
</ui:composition>

PrimeFaces 3.5: row-specific context menu in datatable

I'm working on a web application using JSF and PrimeFaces. One of the pages displays a table of entities, and I'm supposed to add a context menu to the table.
More specifically: The last column contains a p:menuButton whose content depends on the respective row. The menuItems are stored as a ui:compositionin another file, and I'm supposed to simply include them in the context menu.
The menuitems are dynamic, however. The entities do have a boolean member called enabled. For enabled entities, Edit, Delete, and Disable are displayed. For disabled entities, there's only Enable.
With the code below, the context menu is displayed, but they the content is only updated if I select another row via left click. Right-clicking does select rows, but the selectedPerson of the backingbean is not updated.
Apparently there were some changes in PrimeFaces 3.5. I found many references to the contextMenu ajax event.
But when I add it to the datatable like this:
<p:ajax event="contextMenu" update=":persons-form:contextMenu" />
.. the menu appears but disappears immediately. Presumably, because some update method is getting called. In the short timespan it's displayed, I can see it still showing the old menuitems.
So, to summarize: How can I make a contextmenu working as it should in a datatable with PrimeFaces 3.5? Meaning, right-clicking should select a row and also update the menu before displaying it, as the menuitems depend on the row data.
​
​
personList.xhtml:
<p:contextMenu id="contextMenu" for="persons">
<ui:include src="/layout/personActionMenu.xhtml">
<ui:param name="thePerson" value="#{personListBean.selectedPerson}"/>
</ui:include>
</p:contextMenu>
<p:dataTable id="persons"
value="#{personListBean.allPersons}"
var="p"
rowKey="#{p.id}"
selection="#{personListBean.selectedPerson}"
selectionMode="single"
rowStyleClass="#{p.enabled ? '' : 'disabledTableItem'}">
<p:ajax event="rowSelect" update=":persons-form:contextMenu"/>
<p:column>
<f:facet name="header">Name</f:facet>
<h:outputText value="#{p.name}" />
</p:column>
<p:column>
<p:menuButton value="Actions">
<ui:include src="/layout/personActionMenu.xhtml">
<ui:param name="thePerson" value="#{p}"/>
</ui:include>
</p:menuButton>
</p:column>
</p:dataTable>
</h:form>
personActionMenu.xhtml:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:u="http://java.sun.com/jsf/composite/ui"
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:p="http://primefaces.org/ui">
<p:menuitem rendered="#{personListBean.isEnabled(thePerson)}" outcome="edit.xhtml" value="Edit" icon="ui-icon-gear">
<f:param name="id" value="#{thePerson.id}" />
</p:menuitem>
<p:menuitem actionListener="#{personListBean.deletePerson(thePerson)}" value="Delete" update=":person-form"
icon="ui-icon-close" rendered="#{personListBean.isEnabled(thePerson)}"/>
<p:menuitem actionListener="#{personListBean.toggleEnabled(thePerson)}" update=":persons-form" value="#{personListBean.toggleEnabledMenuItemLabel(thePerson)}" />
</ui:composition>
Please try this:
<p:contextMenu id="contextMenu" for="persons" widgetVar="ctxMenu" beforeShow="return true;">
<ui:include src="/layout/personActionMenu.xhtml">
<ui:param name="thePerson" value="#{personListBean.selectedPerson}"/>
</ui:include>
</p:contextMenu>
<p:dataTable ...>
...
<p:ajax event="contextMenu" update=":persons-form:contextMenu" oncomplete="ctxMenu.show(currentEvent);" />
...
</p:dataTable ...>
This is taken from CannyDuck´s post in the PF forum.
Hope this works for you as well.

jsf2 cant reference container page's element from composite component

launcher.xhtml
this form uses "thing"
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:custom="http://java.sun.com/jsf/composite/components">
<h:form id="form">
<p:panelGrid
id="pgid"
columns="2">
<h:outputText value="title"/>
<h:outputText value="#{bean.value}"/>
</p:panelGrid>
<custom:thing
via="#{bean.via1}"
viaListener="#{bean.via2Listener()}"
vias="#{bean.vias1}">
</h:form>
thing.xhtml
<p:selectOneMenu
process="#this"
value="#{cc.attrs.via}">
<p:ajax
listener="#{cc.attrs.viaListener}"
update="form:pgid"
/>
<f:selectItems value="#{cc.attrs.vias}"/>
</p:selectOneMenu>
faces can´t find form:pgid. tried with and without prepending "form". thanks
Relative client IDs (those not starting with :) are searched relative to the parent NamingContainer component, which is in your case the composite component itself. So it's looking for form:pgid in the context of <cc:implementation>.
You need to prefix the client ID with : (the default NamingContainer separator character) to make it absolute to the view root.
<p:ajax ... update=":form:pgid" />
See also:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"

Primefaces 3.4.2 javascript error

I'm developing a web application using the 3.4.2 version of Primefaces. I have a p:pickList on it. Application is working using a general template and each page replaces the general_content of the template, which is being reloaded for every request. My problem is that the picklist is not working (cannot interact with it) because some JavaScript error happens when I load the page. This is my xhtml:
<ui:composition 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:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui"
template="/templates/general_template.xhtml">
<ui:define name="metadata">
<f:metadata>
<f:viewParam id="user" name="user"
value="#{navegableUserData._ParamUser}" />
<f:viewParam id="NavIndex" name="NavIndex"
value="#{navegableUserData._QueueIndex}" />
<f:event type="preRenderView"
listener="#{navegableUserData.initialize}" />
</f:metadata>
<h:message for="user" />
</ui:define>
<ui:define name="general_content">
<h:form id="SystemUserForm">
<p:pickList id="rolePickList" value="#{navegableUserData._ListRoles}"
var="role" itemValue="#{role}" converter="rolConverter">
<f:facet name="sourceCaption">
<h:outputText value="#{msg.AVAILABLE}" />
</f:facet>
<f:facet name="targetCaption">
<h:outputText value="#{msg.ASSIGNED}" />
</f:facet>
<p:column>
<h:outputText value="#{role._Nombre}" />
</p:column>
</p:pickList>
</h:form>
</ui:define>
This is the JavaScript error I have:
Firebug in Firefox
Firebug is telling me the element 'a' cannot be found in the first line of primefaces.js
"a is undefined"
PrimeFaces={escapeClientId:function(a){return"#"+a.replace(/:/g,"\\:")},
...
Inspector in Chrome
Uncaught TypeError: Cannot call method 'replace' of undefined primefaces.js.xhtml:1
PrimeFaces.escapeHTML primefaces.js.xhtml:1
(anonymous function) primefaces.js.xhtml:27
bG.extend.each jquery.js.xhtml:14
bG.fn.bG.each jquery.js.xhtml:14
PrimeFaces.widget.PickList.PrimeFaces.widget.BaseWidget.extend.generateItems primefaces.js.xhtml:27
PrimeFaces.widget.PickList.PrimeFaces.widget.BaseWidget.extend.init primefaces.js.xhtml:27
e.(anonymous function) jquery.js.xhtml:373
c jquery.js.xhtml:373
PrimeFaces.createWidget primefaces.js.xhtml:1
PrimeFaces.cw primefaces.js.xhtml:1
(anonymous function)
It looks like some jquery is failing. With the previous version of Prime, 3.4.1, everything is working fine.
p:pickList (primefaces v3.4.2) requires itemLabel to be specified.
Just add
itemLabel="#{role}"
to your p:pickList

How to use <f:loadBundle> tag inside <ui:composition> tag

I want to use <f:loadBundle> tag in my view. I know that I can declare it inside faces-config.xml, but for a reason I want to use it in my view. I am using the tag in this manner but it is not working. I am using it inside <ui:composition> tag.
<h:head>
<title>Email Content</title>
</h:head>
<h:body>
<ui:composition template="./WEB-INF/templates/layout.xhtml">
<ui:define name="content">
<f:loadBundle basename="presentationBeans.homepage.messages" var="msgs"/>
<h:form id="emailContent_Review" >
<p:growl id="growl" showDetail="true" />
<p:panel id="panel"
header="#{msgs.ECR_panelHeader}"
style="border-color: #000000;width: 960px;position: absolute;left: 150px;height: 370px" >
<p:dataTable value="#{emailContent_Review.emailContent}"
var="emailContent"
selection="#{emailContent_Review.selectedEmailContent}"
emptyMessage="#{msgs.ECR_tableEmptyMessage}"
widgetVar="portalsTable"
rows="8" height="350" paginator="true">
<f:facet name="header" >
</f:facet>
</p:dataTable>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</h:body>
What I am doing wrong? Also I read that
To make use of a template, you use a 'ui:composition' tag with a 'template' attribute.
Facelets removes all tags outside the tag - that is, the doctype declaration, html, head, title and body tags. This is necessary because the <ui:composition> is replaced with the template that contains its own set of html, head, title, and body tags.
If I want to use my properties file in the head section, then how can I use it? Because head section is outside the <ui:composition> tag. I mean to say, if I want to do this
<h:head>
<title>#{msgs.indexWindowTitle}</title>
</h:head>
then how can I use my properties file outside <ui:composition>?
This is indeed not going to work. Change your master template layout.xhtml to replace the title by a template insert placeholder:
<h:head>
<title><ui:insert name="title">Default title</ui:insert></title>
</h:head>
Then change your template client to define it:
<ui:composition template="./WEB-INF/templates/layout.xhtml">
<ui:define name="title">
<f:loadBundle basename="presentationBeans.homepage.messages" var="msgs"/>
#{msgs.indexWindowTitle}
</ui:define>
<ui:define name="content">
...
</ui:define>
</ui:composition>
Note that you don't need to repeat the <f:loadBundle> for <ui:define name="content">.
I have struck upon an approach that works well for me on Mojarra 2.1.x, perhaps give it a tumble. Tweaking #BalusC's example:
<ui:composition>
<f:loadBundle basename="presentationBeans.homepage.messages" var="msgs"/>
<ui:decorate template="./WEB-INF/templates/layout.xhtml">
<ui:define name="title">
#{msgs.indexWindowTitle}
</ui:define>
<ui:define name="content">
...
</ui:define>
</ui:decorate>
</ui:composition>
My approach of nesting the templated ui:decorate within my bare ui:composition tags works well for me because I often want to declare one f:loadBundle tag that is shared by all of my nested ui:define's. Not sure what kinds of extra machinations I'm making the kernel do when I do this however, or if I'm exploiting an incomplete implementation of the spec to get what I want. YMMV

Resources