We are using Primefaces 5.09 with JSF 2.1.2 on a Wildlfy 8.1.0 Final
We have a datatable with a lot of content which consumes quite an amount of time to load (which is ok as it is)
In every row we have a commandLink refering to a dynamically loaded overlayPanel which is defined in a composition:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:panelGroup>
<p:commandLink id="CID" title="#{messageId}" type="button" value="#{messageId}" ajax="true" actionListener="#{SyncClientPopupBean.setSyncClientById(messageId)}" update="grid" disabled="#{not Shiro.isPermitted('admin:syncclient:read')}" />
<p:overlayPanel for="CID" dynamic="true" at="right top" my="left bottom" appendTo="#(body)">
<p:panelGrid id="grid" columns="2" styleClass="ui-datatable-auto-width">
<...../>
</p:panelGrid>
</p:overlayPanel>
</h:panelGroup>
</ui:composition>
The Ajax request itself works fine, as the result only contains the content for the overlayPanel.
Our Problem now is, that the update on the overlayPanel also seems to internally render the rest of the page as it is loading the items for the datatable etc.
Therefore requesting this very small content for the panel takes about as long as loading the whole datatable.
The Backing Beans for the whole Page and the overlay are already separated.
Is there any possibility to get Primefaces to render only this single component?
Related
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 use JSF 2.0 (Apache myFaces) on WebSphere Application Server 8.
I have a bean which contains a list of charts (data for jquery HighCharts).
For each chart I need some JSF components + one Highchart Wrapper written as CompositeCompoent (look here)
So I use the ui:repeat function of jsf 2 like this:
<?xml version="1.0" encoding="UTF-8" ?>
<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:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:hc="http://java.sun.com/jsf/composite/chartComponents"
template="/template/mytemplate.xhtml">
<ui:define name="content">
<ui:repeat value="#{chartCtrl.charts }" var="chart" id="chartrepeat" varStatus="chartStatus">
#{chartStatus.index }
<h:form id="chartform_#{chartStatus.index }">
<!-- some jsf select stuff-->
</h:form>
#{chartStatus.index }
<hc:Chart title="Statistics" id="hcchart_#{chartStatus.index }"
<!-- here's the problem-->
<ui:repeat value="#{chart.series }" var="serie">
<hc:ChartSeries series="#{serie.data }" />
</ui:repeat>
</hc:Chart>
#{chartStatus.index }
</p:panel>
</ui:repeat>
<h:outputScript library="js" name="highcharts.js" />
<h:outputScript library="js/modules" name="exporting.js" />
<h:outputScript library="js" name="jquery-1.9.1.min.js" target="head" />
</ui:define>
</ui:composition>
The #{chartStatus.index } works every where but not in hc:Chart id="".
The generated js and div by this CC contains the id 'hcchart_chartdiv'. The index of the current repeat left.
How can I pass the correct number to the id attribute?
EDIT: Composite Component
Here is a part of the hc:Chart where the ID should be used
<cc:implementation>
<div id="#{cc.id}_chartDiv" />
<!-- Highcharts -_>
<script type="text/javascript">
$(function() {
// Data must be defined WITHIN the function. This prevents
// different charts using the same data variables.
var options = {
credits : {
enabled : false
},
chart : {
renderTo : '#{cc.id}_chartDiv',
....
</script>
When I leave the attribute id in hc:Chart empty, then the generated ID is something like "j_id568185923_1_5f9521d0_chartDiv". But still without :row:.
EDIT 2: IndexOf Approach
I tested another approach to set the ID of my chart.
id="hc_#{chartCtrl.charts.indexOf(chart) }"
I tried to use the IndexOf method of my ArrayList. I implemented HashCode und Equals method in all Classes. When I test it, it works fine.
But when I use it with EL I get -1 returned.
Solution
Just as BalusC said I cant use the ID tag for EL. So I simple created a new attribute in my CC. That works fine (just so easy).
Thanks BalusC.
Does someone has another idea?
The id attribute is evaluated during view build time. The <ui:repeat varStatus> is set during view render time which is after view build time. Essentially, you've the same problem as explained in detail here: JSTL in JSF2 Facelets... makes sense?
Any EL expression in the id attribute must be available during view build time. If you replace <ui:repeat> by <c:forEach> which runs during view build time, then the id must be properly set. An alternative is to just get rid of EL in those id attributes based on <ui:repeat varStatus>. JSF will already automatically suffix the IDs of <ui:repeat> child components with the row index.
Note that the <c:forEach> may have unforeseen side effects when used in combination with view scoped beans and partial state saving enabled. See the aforelinked answer for details.
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" />
I've simple 3line jsf page and a backing bean. I'm using command button in my page. Onclick event I'm calling ajax. where ajax method adds an output text component to child. Now the problem is. Out put text component is rendered on load of the page rather than on click of the page.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h:form>
<h:commandButton id="button1" action="return false" value="Submit">
<f:ajax execute="#{bb.method1()}" render="#form" transient="true" event="click" />
</h:commandButton>
</h:form>
</h:body>
</html>
Backing bean code
#Named("bb")
#SessionScoped
public class BackingBean implements Serializable {
public BackingBean() {
}
public void method1()
{
HtmlOutputText out=new HtmlOutputText();
out.setValue("Text1");
FacesContext context=FacesContext.getCurrentInstance();
context.getViewRoot().getChildren().add(out);
context.getViewRoot().setTransient(true);
}
}
on click of button firebug show status 200 OK.. But I can see no changes at the page
The execute attribute should refer a space separated collection of client IDs of input components which needs to be processed during ajax submit. This attribute is evaluated when the view get rendered and any method bound to it thus get invoked immediately.
You should be using the listener attribute instead.
<f:ajax listener="#{bb.method1()}" render="#form" transient="true" event="click" />
The same is true for the render attribute.
See also:
<f:ajax> tag documentation
I have the exact same dialog form setup as the primefaces example below. When I put my cursor in the p:inputText on the below primefaces example and hit enter the window is closed automatically. On my example, I've even removed all links/buttons etc and just have a form and an input and it still closes the dialog when hitting enter. Any way around this?
http://www.primefaces.org/showcase/ui/dialogForm.jsf
mycode:
<?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="content">
<h:form id="dreamModifyFrm">
<p:commandLink onclick="webSearchDlg.show();" value="open"/>
<p:dialog header="#{bundle['dreamSearch.HEADER']}"
widgetVar="webSearchDlg" modal="true" styleClass="dialog dialog2"
draggable="false" resizable="false" showEffect="fade" position="top"
hideEffect="fade">
<p:inputText id="searchText" value="#{dreamSearchBean.searchText}"/>
</p:dialog>
</h:form>
</ui:define>
</ui:composition>
</html>
My issues was fixed using the below:
There is a "feature" in IE where if you have only a single input element inside a form then hitting enter while focus in in the input element causes the form to submit (regardless of whether you even have a submit button). One way to prevent this is to add a second input element with style="display: none;".
Add the following onkeyup attrubute with a little JavaScript to the <h:form> or the <h:inputText> element to prevent the default action on enter press.
onkeyup="return event.keyCode != 13"
The enter key has a keycode of 13, so the above will return false when it is pressed and so the element's default action will be blocked.
Let me just wrap it up from a 2013 perspective:
When using newer PrimeFaces (3.2+?) versions, you can also use
<p:defaultCommand target="search-button" />
as described here:
http://blog.primefaces.org/?p=1787
ShowCase link:
http://www.primefaces.org/showcase-labs/ui/defaultCommand.jsf
Of course, this tag must be directly underneath the h:form tag, otherwise the tag isn't working.
When not using PrimeFaces, you must have something like
<h:inputText style="display: none;" />
on the form, as described in the earlier answer by c12.
Both of the above will cause IE browsers to behave like FF, Chrome, etc. When not using IE at all, BalusC's solution suffices.
I got the same Problem. I have a From with several Dozens InputTexts and several Buttons. When i pressed 'enter' in a inputText, the first Button was triggered and NOT the submit Button.
The hints above (onkeyup="return event.keyCode != 13" and p:commandButton with display:none) didn't work for me.
My solution was pretty simple and works. Just let your Submit-Button be the first button in your HTML-Code. The correct layout/arrangement of Button can be done via CSS, i.e. "float: left;"
Example:
<p:commandButton value="Save" ajax="true"
icon="ui-icon-disk"
update="myTable"
actionListener="#{myTableBean.save()}" />
<p:commandButton id="previousPeriod" update="myTable"
icon="ui-icon-triangle-1-w" ajax="true" type="push"
style="float: left;"
actionListener="#{myTableBean.scrollPrevious}"
value="Previous" />
After putting my Save-Button before my "Previous"-Button, everything worked fine! After pushing "enter" within a inputText, the Form gets submitted now and the "float:left" places the Prev-Button before the Save-Button in the visual Layout.