I want to implement a live filter for a list with JSF 2 but when using keyup event so many requests are being sent to the server. The code looks like:
<h:inputText id="filter_input" value="#{bean.filterText}">
<f:ajax event="keyup" listener="#{bean.filter}"
render="#form:list" execute="#this" />
</h:inputText>
f:ajax has added support for ajax event delay starting from JSF 2.2. Just include it as an attribute with its value in miliseconds:
<f:ajax event="keyup" delay="1000" listener="#{someBean.doSomething}"
render="somefield" execute="#this" />
See also:
Primefaces keyup event delay
Richfaces a4j event queuing
Delay a JSF AJAX listener for checkbox group
JSF 2.1 Ajax autocomplete + server search only after user stops typing
If you are using a previous version of JSF, PrimeFaces has been supporting a similar feature before JSF did:
<p:ajax event="keyup" delay="1000" listener="#{bean.filter}"
update="somefield" process="#this" />
Note that PrimeFace does not use a render attribute nor does it use execute. Use update and process instead (although process="#this" is redundant beacuse it's already the default value for p:ajax)
here's the documentation :
https://www.primefaces.org/docs/vdl/5.0/core/primefaces-p/ajax.html
And an other post that is related : primefaces keyup event delay
Related
How to update a div and do partial submission using <h:commandButton>, I have previously used <p:commandButton> to do partial submission by setting the ajax attribute to true and the update attribute to :statusBlock, where the id of the <h:panelGroup> is statusBlock. I am having some designing issues with <p:commandButton> so I cannot use it so I have to use <h:commandButton>.
This is to be done by nesting a <f:ajax> in it.
In effects,
<p:commandButton ... process="#form" update=":statusBlock" />
does exactly the same as
<h:commandButton ...>
<f:ajax execute="#form" render=":statusBlock" />
</h:commandButton>
Note that the subtle difference with the PrimeFaces equivalent is that PrimeFaces defaults to #form in the process/execute, while the <f:ajax> one defaults to #this, so you might need to explicitly specify execute="#form" over all place where you didn't specify the process attribute in the PrimeFaces component.
See also:
Communication in JSF 2.0 - Ajax (asynchronous) POST form
You can just use the standard components alongside f:ajax e.g.
<h:form id="myForm">
<h:commandButton value="Push Me">
<f:ajax execute="myForm" render="statusBlock" />
</h:commandButton>
<h:panelGroup id="statusBlock">
</h:panelGroup>
</h:form>
I have a button to submit a form and invoke a managed bean action.
<h:form>
...
<h:commandButton value="Submit" action="#{bean.submit}" />
</h:form>
But when I press the button it refreshes the whole page and sometimes also changes the URL.
Is there some way to not refresh the page and still invoke the action?
Make use of Ajax. It's a matter of nesting <f:ajax> inside the command button of interest.
<h:form>
...
<h:commandButton ...>
<f:ajax execute="#form" render="#none" />
</h:commandButton>
</h:form>
Particularly the render="#none" (which is the default value anyway, you could just omit the attribute altogether) will instruct JSF to re-render just nothing after the submit. If you intend to re-render only a specific component instead of the whole page, then you could also specify the ID of that specific component in render attribute.
<h:form>
...
<h:commandButton ...>
<f:ajax execute="#form" render="result" />
</h:commandButton>
...
<h:panelGroup id="result">...</h:panelGroup>
</h:form>
If you're already using PrimeFaces, then it's a matter of simply using <p:commandButton> instead of <h:commandButton>. It uses by default ajax already, so you don't need to nest in a <f:ajax>. You only need to remember to use attribute names process and update instead of execute and render.
<h:form>
...
<p:commandButton ... update="result" />
...
<h:panelGroup id="result">...</h:panelGroup>
</h:form>
The execute attribute defaults to #form already, so it could be omitted.
See also:
Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
I'm using PrimeFaces poll component to refresh some content.
<h:form id="formBsvtt">
<p:messages autoUpdate="true" showDetail="false" />
<p:outputPanel id="panelOut" layout="block">
...
... content to refresh
...
</p:outputPanel>
<p:panelGrid id="panelIn" layout="block">
...
... various input components with validation
...
</p:panelGrid>
<p:poll widgetVar="poll1" autoStart="true" global="false" interval="15"
partialSubmit="true" process="#this" update="panelOut"
listener="#{myBean.myListener}">
</p:poll>
</h:form>
As you can see I'm using messages with autoUpdate=true. My Problem is: In case of validation errors FacesMessages will be shown, but disappear not later than 15 seconds.
Is it possible to prevent poll from clearing FacesMessages without setting messages autoUpdate=false?
My web application is much bigger as code snippet specified above and my intention is not updating messages manually in each possible case!
PrimeFaces 2.x/3.x
This is not natively possible, so a trick is needed. In the rendered attribute of <p:messages>, check if <p:poll> was been triggered and if so, then return false. This way JSF thinks there's no auto-updatable messages component in the component tree during rendering and will therefore ignore it.
If the <p:poll> is triggered, then its client ID appears as javax.faces.source request parameter. So, this should do:
<p:messages ... rendered="#{param['javax.faces.source'] ne poll.clientId}" />
...
<p:poll binding="#{poll}" ... />
(note: no additional bean properties needed)
PrimeFaces 4.x+
All PrimeFaces command components got a new ignoreAutoUpdate attribute which you could set to false to ignore all autoUpdate="true" components in the ajax update.
<p:poll ... ignoreAutoUpdate="true" />
For folks using Primefaces 4.0 and above, the Primefaces team have added an attribute to their ajax aware components to skip triggering components with autoUpdate set to true. So your poll would be
<p:poll ignoreAutoUpdate="true" .../>
See also their blog post about it: http://blog.primefaces.org/?p=2836
When I am trying to insert a validator to a selectOneMenu element containing a ajax listener in JSF, the ajax listener begins to not working. The following is my JSF snipplet specific to issue I am talking:
<h:selectOneMenu id="metalCodes" converter="metalCodeConverter" required="true" requiredMessage="#{lang.metalStockIntroducing_metalCode_req_txt}" value="#{metalStockIntroducingProcessesBean.metal.metalCode}">
<f:selectItem itemLabel="Please select..." noSelectionOption="true" />
<f:selectItems value="#{metalStockIntroducingProcessesBean.metalCodesMenu}" />
<f:ajax listener="#{metalStockIntroducingProcessesBean.changeMetalType}" event="change" execute="metalCodes" render="metalTypesMenu" immediate="false"/>
<f:validator validatorId="densityValidator"/>
</h:selectOneMenu>
What would you friends recommend me to do in order to make the validator and ajax listener works collaborately in a h:selectOneMenu JSF element?
They ought to work fine together. The ajax listener method will only not be invoked when the validator threw an exception. Make sure that your validator isn't incorrectly doing that. Make sure that you're re-rendering the <h:message> or <h:messages> associated with the input component as well so that you get notified of any faces messages during an ajax request. Or at least read the server logs, any queued-but-not-displayed faces messages will be logged there.
So, let me show us my troubles :)
1 - When i click on a commandbutton
<h:commandButton value="Somethings">
<f:setPropertyActionListener target="#{bean.method}" value="some" />
<f:ajax render="rendering"/>
</h:commandButton>
I dont do any action to the commandButton. Just i fire the ajax call. If i add an action on the button (like action="bean.myAction) it will be executedat the 5° phase of the JSF lifecycle (allright, only if i write event="action" in the f:ajax, but thats as default). Right? But the f:ajax is fired by cliccing on the button as default? Because for a ListBox for example, it's fired only if i write event="change" (the same, i shouldnt write it, because is as default).
2 - When i click on image
<h:graphicImage value="img/img.png" alt="img">
<f:setPropertyActionListener target="#{bean.method}" value="some" />
<f:ajax event="onclick" render="rendering"/>
</h:graphicImage>
This doesnt work. Why?
As usual, thanks for the help!!!!
1 - When i click on a commandbutton
I dont do any action to the commandButton. Just i fire the ajax call. If i add an action on the button (like action="bean.myAction) it will be executedat the 5° phase of the JSF lifecycle
The f:setPropertyActionListener will be executed in the 5th phase as well.
(allright, only if i write event="action" in the f:ajax, but thats as default). Right? But the f:ajax is fired by cliccing on the button as default? Because for a ListBox for example, it's fired only if i write event="change" (the same, i shouldnt write it, because is as default).
The f:ajax just changes the behaviour from a synchronous submit to asynchronous (partial) submit. It does that by generating some additional JavaScript code to the desired event attribute of the parent component (e.g. onclick, onchange, etc, look in generated HTML output in webbrowser). It doesn't change anything in the JSF lifecycle. Only the rendered response will be a partial response which is exactly the part which is to be updated in the component(s) with ID as definied in render attribute.
2 - When i click on image
This doesnt work. Why?
Because the h:graphicImage does not support f:setPropertyActionListener at all. It only works in UICommand components.
You want to wrap it in a h:commandLink instead.
<h:commandLink>
<f:setPropertyActionListener target="#{bean.method}" value="some" />
<f:ajax event="action" render="rendering"/>
<h:graphicImage value="img/img.png" alt="img"/>
</h:commandLink>
(and if necessary style the border/underline caused by generated <a> element away with CSS)