I need to execute a backing bean method when the user selects that checkbox on the top (the one that selects all the check-boxes).
I'm talking about this one:
As for the regular check boxes:
I was able to execute a backing bean method by adding the following tags inside the <p:dataTable><p:dataTable/>:
<p:ajax event="rowSelectCheckbox" listener="#{beanJanela.atualizaVariacaoSaldo}" update="variacaoSaldo" />
<p:ajax event="rowUnselectCheckbox" listener="#{beanJanela.atualizaVariacaoSaldo}" update="variacaoSaldo" />
It almost seems like it would be a matter of just adding another <p:ajax .. /> with an event like rowSelectAllCheckbox, unfortunately that event does not exist.
So how would I go about executing #{beanJanela.atualizaVariacaoSaldo} when that first checkbox is selected? Thank you.
The Primefaces User Guide (Version 6.2), page 181 offers the following event on p:datatable:
Event: toggleSelect
Listener Parameter: org.primefaces.event.ToggleSelectEvent
Fired: When header checkbox is toggled.
So try using
<p:ajax event="toggleSelect" .../>
on the datatable.
Related
https://www.primefaces.org/showcase/ui/ajax/event.xhtml
I want do that same what in showcase but without refreshing page. Like: setting value in inputtext and click on button to view result, but if i have <p:ajax event="blur" />or <p:ajax/> then i must click two times on the button
<p:inputText id="data" value="#{buttonView.data}">
<p:ajax/>
</p:inputText>
<p:commandButton value="Ajax Submit" id="ajax" actionListener="#{buttonView.buttonAction}" />
Maybe something like use outpupanel and update that panel in commandbutton?
If you are to use the <p:commandButton /> then the form will be submitted. In this case use update attribute of <p:commandButton /> to update the target component.
If you want to update another component as soon as you type then use <p:ajax event="keyup" update="your_target_component_id" /> to update your target component. (YOur event can be keyup, keypress, change, blur, etc.)
I don't understand why are you mixing the concept of using p:ajax with the functionality of the p:commandButton.
Basically, usage of p:ajax is intended to partially process the
field(s) value and update the component(s) of the form even without
submitting it.
Example:
You have Countries and States drop-downs (pre-populated) on a screen (let's say registration) with some other fields, but if user changes the country, you need to refill the States drop-down and update on the screen asynchronously. There you need to use the p:ajax.
On the other hand, p:commandButton is intended to submit the form
(not to update the components initially). However, it also supports
the updating of the components using update attribute.
Example:
Now, reconsider the above example with similar drop-downs (but disabled with fixed values). Now you know that your screen has nothing to be updated and you just have to tackle with validation (if any) and submit the form (update if required).
As far as you are concerned with using the p:ajax on the p:inputText for some asynchronously updates on the screen and p:commandButton to finally submit the form, that totally depends on your requriement.
Instead p:ajax try f:ajax. You can use < f:ajax event="change" render="#this"/>
once the value gets change, same will reflect in backing bean.
I have two p:ajax tags registered for the same rowSelect event on a datatable.
One p:ajax resides inside a composite component to only update common regions in the page, the other p:ajax has a listener and it is registered outside the composite component.
I observed the listener from the outside p:ajax to be called twice. How can the listener method be executed one time only, as it is registered only on one p:ajax tag?
<myComp:dataTable ...>
<p:ajax event="rowSelect" update=":form:tableDetails" listener="#{backingBean.selectRow}"/>
</myComp:dataTable>
and here the CC code:
<cc:interface >
<cc:clientBehavior event="rowSelect" name="rowSelect" targets="#{cc.clientId}:dataTable" />
</cc:interface>
<cc:implementation>
<p:dataTable id="dataTable" ...>
<p:ajax event="rowSelect" update=":form:footPanelAndButtons"/>
</p:dataTable>
</cc:implementation>
I omitted the most of the attributes on the tags to keep it simple.
I know this is might be a performance issue since client/server communication occurs twice for the same event.
They end up on the same datatable (that is how you specified it via the targets attribute on the <cc:clientBehavior.../>) and you cannot have to identical events (both rowSelect) on the same component. That is just a limitation of the PF components. Normally the last one is executed twice (see link below) but I don't know which one that will be in this construct. If the method is called twice, you know...
See also
p:ajax fires twice
Here is my configuration:
PrimeFaces: 4.0.4 (elite)
OmniFaces: 1.6.3
JSF: MyFaces 2.0.2
Server: WebSphere 8.5.0.2
Some code (I only post the relevant part for better clarity):
<p:selectOneMenu value="#{viewModel.selectedContact}" required="true" converter="omnifaces.SelectItemsConverter">
<p:ajax event="change" listener="#{viewModel.updateContact}" update="area"/>
<f:selectItem itemValue="#{null}" itemLabel="#{msg.no_contact}" noSelectionOption="true" />
<f:selectItems value="#{viewModel.contacts}"/>
</p:selectOneMenu>
So here, we have a simple p:selectOneMenu that contains a list of Contact objects as well as a "No Contact" option. This field is required if I want to submit the form.
When a contact is selected in the list, the updateContact method is called. This method will generate data that will be displayed in the area section of the page updated by the AJAX call.
If I select the "No Contact" option, a validation error is triggered as this field is required, so the updateContact method is not called. I would like the method to be called as I would need to reset some data then hide the area section of the page.
I have tried using process="#this", immediate="true", but it doesn't work. With immediate="true", the selected Contact is not passed to the updateContact method.
So, what is the best way to bypass the validation of this field when selecting a null value?
Let the required attribute check if the command button is invoked. You can check that by the presence of the button's client ID in the request parameter map.
<p:selectOneMenu ... required="#{not empty param[save.clientId]}" />
...
<p:commandButton binding="#{save}" ... />
(note: code is as-is, you don't need a bean property for this)
If the command button is not invoked (but instead the ajax change listener is invoked), then the required attribute will evaluate false and everything will go as you intented.
Update: as per the comments, you intend to make them appear like required during render response all time. So, just add that check:
<p:selectOneMenu ... required="#{not empty param[save.clientId] or facesContext.currentPhaseId.ordinal eq 6}" />
...
<p:commandButton binding="#{save}" ... />
I'm making form with dropdowns, where user have to make first choice, than using ajax next choices appear. It works just fine. But I wanted to add bootstrap formatting for dropodwns, so I installed bootstrap-select. It work also just fine, but when ajax event renders data for next he renders it in a new dropdown, next to still empty bootstrap formated dropdown. Witch, how can you predict, isn't desired action. Here's code from jsf:
<h:selectOneMenu styleClass="bootstrap-select" id="marka" value="#{searchBean.markiID}">
<f:selectItems value="#{searchBean.listaMarek}" var="c" itemLabel="#{c.marka}"
itemValue="#{c.markaID}"/>
<f:ajax event="change" execute="marka" render="model"/>
</h:selectOneMenu>
<h:outputText value="#{msg.carModel}"></h:outputText>
<h:selectOneMenu styleClass="bootstrap-select" id="model" value="#{searchBean.modelID}">
<f:selectItems value="#{searchBean.listaModeli}" var="p" itemLabel="#{p.model}"
itemValue="#{p.modelID}"/>
<f:ajax event="change" execute="model" render="liczbaDrzwi"/>
</h:selectOneMenu>
In backingbean, when user choose smthging from first dropdown, Is generated list of items for second dropdown, and so on. And this is the result of making choice:
As you can see, ajax makes totally new dropdown, instead of filling already existing.
Thanks for any ideas:)
JSF Ajax works in this way... instead of filling the already existing dropdown... the jee server send a new HTML fragment to replace this dropdown code...
Maybe you could read this link to understand JSF lifecycle...jsf lifeclycle
Did you try using primefaces or richfaces instead of h:selectOneMenu component?
Here is a PrimeFaces example where you can see how to update one dropdown when you select a value on another dropdown... pf example
Is it possible to use with dropdown menus or is it also dependent on the parent object implementing ActionSource as the f:setPropertyActionLister is?
Ideally I would have done something like the following:
<h:selectOneMenu value="#{myCustomBean.selectedItemIndex}">
<f:selectItems value="#{adminLetterAdminBean.missingSettings}" var="n" itemValue="#{n.id}" itemLabel="#{n.name}"/>
<f:setPropertyActionListener value="42" target="#{adminLetterAdminBean.someProperty}" />
<a4j:ajax />
</rich:select>
However this does not work because h:selectOneMenu does not implement javax.faces.component.ActionSource. The page does not render and it gives me a friendly stack trace to tell me about this dependency.
Not seeing anything in the Richfaces documentation about this constraint, I tried the following:
<h:selectOneMenu value="#{myCustomBean.selectedItemIndex}">
<f:selectItems value="#{adminLetterAdminBean.missingSettings}" var="n" itemValue="#{n.id}" itemLabel="#{n.name}"/>
<a4j:param assignTo="#{adminLetterAdminBean.someProperty}" value="42" name="randomRequestParamName"/>
<a4j:ajax />
</rich:select>
This does not blow up, but it also does not set the property. I was wondering if there is a set a (or multiple) properties in a similar fashion.
a4j:param can only be nested inside an action component such as a4j:commandButon, a4j:commandLink and a4j:jsFunction. You can also use it with the standard button/link components.
I had a similiar problem. My page has to transfer information about the autocomplete before the autocomplete request is done. I achieved this by using jsFunction. My autocomplete looks like:
<rich:autocomplete mode="ajax" showButton="true" value="#{conf.fieldValue}"
autocompleteMethod="#{BackingBean.search.autocomplete}"
minChars="3" onfocus="sendInfo('#{conf.label}')">
</rich:autocomplete>
Depending on conf.label (conf is a forEach variable) different data is fetched by the backing bean in the autocomplete method.
The transfer of this information is done by jsFunction (just after the autocomplete declaration):
<a4j:jsFunction name="sendInfo">
<a4j:param name="param1" assignTo="#{BackingBean.search.currentAutocomplete}"/>
</a4j:jsFunction>
Just, when the user puts the focus on a specific autocomplete "sendInfo" is executed with one parameter which is bound to the backing bean.