p:tree ajax events are updating other components - ajax

I have a problem with ajax events of the p:tree component
Here's the xhtml code:
<form id="form1">
<!-- Other components -->
<p:panel id="panel1" binding="#{panel1}"
header="..." toggleable="true" toggleSpeed="500"
collapsed="false" dynamic="true"
rendered="#{service.checkMethod(...)}">
<div class="column">
<p:tree id="treeId" value="#{tree.root}"
var="node" selectionMode="single"
rendered="#{tree != null}"
selection="#{flowScope.selectedNode}"
widgetVar="treeId"
process="tree">
<p:ajax event="select" process="#this"
update="#this :#{anotherPanel.clientId} :#{anotherPanel2.clientId}"
listener="#{service.onNodeSelect}" oncomplete="setSelectedNode()" />
<p:ajax event="expand" process="#this" listener="#{service.onNodeExpand}" />
<p:ajax event="collapse" process="#this" listener="#{service.onNodeCollapse}" />
<p:treeNode>
<h:outputLabel value="#{node.attribute}" />
</p:treeNode>
</p:tree>
<h:outputLabel
value="Empty"
rendered="#{tree.isEmpty()}" />
</div>
</p:panel>
<!-- Other components -->
</form>
The panel1 rendered attribute has a method which will create a new tree every time is updated, but somehow all the ajax events on the tree are calling that method. Even the expand and collapse update, which doesn't have the update defined, is doing that.
I already tried putting global="false", immediate="true", using different type of updates and process, on all the ajax events, or putting other panels between the tree and the panel, but it has the same effect. I searched all my files with Eclipse, to make sure that this method isn't called elsewhere, but it's only used here.
Is there a way to prevent the tree ajax events from re-rendering the above panel?

Related

JSF - commandbutton in newly AJAX rendered form doesn't fire

In my JSF 2.2 application on Glassfish 4.0, i need to allow update of single fields within a page.
For each field, i created a h:form containing two ui:fragments.
Each of there fragments is rendered based on the value of a boolean edit attribute named enteEdit in my backing bean FascicoloDettaglio.
FascicoloDettaglio is #ViewScoped.
The first fragment contains an h:outputText with the value from my bean, and a h:commandLink used to update the edit attribute and fire an AJAX request to re-render the form, which causes the first fragment to disappear and the second fragment to appear.
The second fragment contains the h:inputText used to edit the field, and the submit h:commandButton, which resets the edit attribute and then AJAX-calls the action method.
However, the second button never works; the action is not called and the button simply does nothing; while it should call the action and then re-render the entire form, turning the second fragment off and the first on.
I can't understand why it doesn't work.
This is the JSF code fragment:
<h:form>
<ui:fragment rendered="#{not fascicoloDettaglio.enteEdit}">
<h:outputText value="#{fascicoloDettaglio.fascicolo.ente}" />
<h:commandLink rendered="#{request.isUserInRole('affgen')}">
<h:graphicImage name="img/modify.png" width="24" height="24" title="Modifica" />
<f:ajax render="#form" />
<f:setPropertyActionListener target="#{fascicoloDettaglio.enteEdit}" value="true" />
<f:setPropertyActionListener target="#{fascicoloDettaglio.ente}" value="#{fascicoloDettaglio.fascicolo.ente}" />
</h:commandLink>
</ui:fragment>
<ui:fragment rendered="#{fascicoloDettaglio.enteEdit}">
<h:inputText value="#{fascicoloDettaglio.ente}" requiredMessage="Introdurre l'ente ricorrente." required="true" styleClass="largetext #{component.valid ? '' : 'inputvalidationerror'}">
<f:validateLength maximum="255" />
</h:inputText>
<h:commandButton action="#{fascicoloDettaglio.salvaEnte}" value="Salva">
<f:setPropertyActionListener target="#{fascicoloDettaglio.enteEdit}" value="false" />
<f:ajax execute="#form" render="#form" />
</h:commandButton>
<h:messages />
</ui:fragment>
</h:form>
Any help would be very appreciated.

Primefaces - ui:repeat component does not update

I have a problem to ajax update an ui:repeat. The update is triggered from a commandButton outside the ui:repeat (see the code below). The variable priceHour is required to calculate the other prices (week, Monat..)
<h:form id="myForm">
<ui:repeat id="alvs" var="alv" value="#{myBean.allV}" >
<h:panelGroup rendered="#{alv.status == 'ON'}" >
<div class="pricing">
<h:outputText styleClass="bold" value="#{alv.shortName}: "/>
<p:inputText value="#{alv.priceHour}" id="hour" required="true" >
<f:convertNumber pattern="#.##" type="currency" />
</p:inputText>
<p:inputText value="#{alv.priceDay}" id="day" >
<f:convertNumber pattern="#.##" type="currency" />
</p:inputText>
<p:inputText value="#{alv.priceWeek}" id="week" >
<f:convertNumber pattern="#.##" type="currency" />
</p:inputText>
<p:inputText value="#{alv.priceMonth}" id="month" >
<f:convertNumber pattern="#.##" type="currency" />
</p:inputText>
</div>
</h:panelGroup>
<p:messages />
</ui:repeat>
<p:commandButton value="Calculator" actionListener="#{myBean.priceCalc}" process="#this,alvs:hour" update="alvs" />
</h:form >
When I click the button nothing happens and the ui:repeat and the prices are not updated. What is wrong? I tried also update"myForm:alvs", update":myForm:alvs": nothing!
I'm using primefaces 3.5
Thanks in advance
ui:repeat is not a rendered component, so you won't see anything in HTML about it. You can't update something that is not rendered. Also the ui:repeat doesn't even have an id attribute.
You need to wrap your ui:repeat inside a component such as h:panelGroup for example like this :
<h:panelGroup id="alvs">
<ui:repeat ...>
</ui:repeat>
</h:panelGroup>
And update the panelgroup in your button :
<p:commandButton value="Calculator" actionListener="#{myBean.priceCalc}" process="#this,alvs" update="alvs" />
Notice that I've removed the :hour since you can't spectify it, each IDs will be different for each repeat.
More info :
JSF 2.0 ui:repeat
I had the same problem. The proposed answers didn't work for me: the ui:repeat doesn't want to be updated by ajax, whatever I do. I used PrimeFaces data list instead and it worked like a charm.
http://www.primefaces.org/showcase/ui/data/dataList.xhtml
I'm afraid I don't know the reason for it to not work, I hate when that kind of stuff happens to me working with JSF. As I workaround, you can try surrounding the ui:repeat with a p:outputPanel and then update that panel.

h:inputText is not ajax-rendered on change of h:selectOneMenu

I have this code which is used to select how many rows to display in jsf table:
<!-- Set rows per page -->
<h:outputLabel for="rowsPerPage" value="Rows per page" />
<h:inputText id="rowsPerPage" value="#{AccountsController.rowsPerPage}" size="3" maxlength="3" />
<h:commandButton styleClass="bimage" value="Set" action="#{AccountsController.pageFirst}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:message for="rowsPerPage" errorStyle="color: red;" />
I want to edit the code this way: I want to replace the code with h:selectOneManu and option to insert custom value with AJAX support:
<h:selectOneMenu id="setrows" value="#{AccountsController.rowsPerPage}" converter="javax.faces.Integer" maxlength="3">
<f:selectItem itemValue="10" itemLabel="10" />
<f:selectItem itemValue="50" itemLabel="50" />
<f:selectItem itemValue="100" itemLabel="100" />
<f:selectItem itemValue="500" itemLabel="500" />
<f:selectItem itemValue="332" itemLabel="Custom" />
<f:ajax render="customrowperpage" />
</h:selectOneMenu>
<h:inputText id="customrowperpage" value="#{AccountsController.rowsPerPage}" rendered="#{AccountsController.rowsPerPage == '332'}" required="true" />
But for some reason the code is not working. Can you help me to find the problem. Also I want to update AJAX functionality when I select number from the h:selectOneMenu list AJAX call to update the form.
There are 2 problems.
First, as JavaScript runs in the client side, you can't ajax-update a JSF component which isn't rendered to the client side. There's then simply nothing in the HTML DOM tree which JavaScript can select, manipulate and replace. You should instead ajax-update a JSF component which is always rendered to the client side.
<h:panelGroup id="customrowperpage">
<h:inputText value="#{AccountsController.rowsPerPage}" required="true"
rendered="#{AccountsController.rowsPerPage == '332'}" />
</h:panelGroup>
See also Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
Second, an Integer never equals a String. You're in the rendered attribute testing Integer rowsPerPage against String '332'. Remove those singlequotes to make it a fullworthy number.
<h:panelGroup id="customrowperpage">
<h:inputText value="#{AccountsController.rowsPerPage}" required="true"
rendered="#{AccountsController.rowsPerPage == 332}" />
</h:panelGroup>

Ajax event within dataTable which is re-rendered by another ajax event does not execute

I am building an invoice application. When the user selects the client, then the services associated with the client are re-rendered in a dataTable by an ajax event. But, the ajax event of the selectOneMenu in the dataTable does not fire.
This is the form which lets the user select a client:
<h:form>
<h:selectOneMenu id="clientSelect" value="#{invoiceBean.client}">
<f:ajax execute="clientSelect" listener="#{invoiceServiceListener.processClientValueChange}" render=":test :invoiceData"/>
<f:selectItems value="#{invoiceBean.clientOptions}"/>
</h:selectOneMenu>
</h:form>
This will fire an ajax event which fills the services array in the invoiceBean and re-renders the dataTable which displays the services in another selectOneMenu in the dataTable. This part works properly.
This is the datatable that is re-rendered after selecting the client by the above form:
<h:panelGroup id="test">
<h:dataTable id="invoiceData" value="#{attributes.priceAttributes}" var="loop">
<h:column>
<ui:param name="service" value="service#{loop}" />
<ui:param name="description" value="description#{loop}" />
<ui:param name="price" value="price#{loop}" />
<h:form id="invoiceSelectMenu">
<h:selectOneMenu id="selectMenu" value="#{invoiceBean[service]}">
<f:ajax event="change" execute="selectMenu" listener="#{invoiceServiceListener.procesServiceValueChange}" render="#form" />
<f:attribute name="row" value="#{loop}" />
<f:selectItems value="#{invoiceBean.services}" />
</h:selectOneMenu>
<h:inputText id="description" value="#{invoiceBean[description]}" />
<h:inputText id="price" value="#{invoiceBean[price]}" />
<h:outputText value="#{loop}" />
</h:form>
</h:column>
</h:dataTable>
</h:panelGroup>
The selectOneMenu is filled properly. However, the ajax event in this select one menu does not work after it has been re-rendered by the first form. But, if I manually fill the services array without submitting the first form, then this ajax event executes normally. By the way, this ajax event also sets a value to the description and price input fields, which should be re-rendered when the event happens. The invoiceBean is request scoped.
This is going to be tricky. Due to JSF spec issue 790, whenever you re-render some content containing another <h:form> using <f:ajax>, then its view state will get lost. To solve this, you'd basically need to reference the full client ID of another <h:form> inside <f:ajax> instead of some containing component. But you've basically multiple forms inside a <h:dataTable> which can't be referenced by an absolute client ID.
You'd need to rearrange the code to put the <h:form> outside the <h:dataTable> and change the <f:ajax> to execute only the necessary components.
<h:form id="invoiceDataForm">
<h:dataTable id="invoiceData" value="#{attributes.priceAttributes}" var="loop">
<h:column>
<ui:param name="service" value="service#{loop}" />
<ui:param name="description" value="description#{loop}" />
<ui:param name="price" value="price#{loop}" />
<h:selectOneMenu id="selectMenu" value="#{invoiceBean[service]}">
<f:ajax execute="selectMenu,description,price" listener="#{invoiceServiceListener.procesServiceValueChange}" render="#form" />
<f:attribute name="row" value="#{loop}" />
<f:selectItems value="#{invoiceBean.services}" />
</h:selectOneMenu>
<h:inputText id="description" value="#{invoiceBean[description]}" />
<h:inputText id="price" value="#{invoiceBean[price]}" />
<h:outputText value="#{loop}" />
</h:column>
</h:dataTable>
</h:panelGroup>
and then reference it form the first form as follows:
<f:ajax execute="clientSelect" listener="#{invoiceServiceListener.processClientValueChange}" render=":invoiceDataForm" />
Note that some component libraries such as PrimeFaces have already workarounded/solved this in the component library specific ajax engine. So if it might happen that you're already using PrimeFaces, you could also replace <f:ajax> of the first form by <p:ajax>.
Unrelated to the concrete problem, the <f:attribute name="row" value="#{loop}" /> may not do what you expect it does. It will set null because <f:xxx> tags run during view build time, not during view render time tag. The #{loop} is not available during view build time. But that's subject for a different question :)

f:ajax works only with #form or #all

i have a composite component that contains a form with ajax. what i can't figure out is why it only works for the #form/#all render parameter.
<cc:interface>
<cc:attribute name="radioItem"/>
<cc:attribute name="radioItems" />
<cc:attribute name="compImage" />
<cc:attribute name="compSpecification"/>
</cc:interface>
<!-- IMPLEMENTATION -->
<cc:implementation>
<h:form>
<div id="options">
<h:selectOneRadio value="#{cc.attrs.radioItem}" >
<f:selectItems value="#{cc.attrs.radioItems}" />
<f:ajax render=":details" />
</h:selectOneRadio>
</div>
<div id="details">
<h:graphicImage value="#{cc.attrs.compImage}"/>
<h:outputText value="#{cc.attrs.compSpecification}"/>
</div>
</h:form>
</cc:implementation>
What am i missing?
This problem is two-fold:
You're specifying an absolute client ID :details while the element to be re-rendered is inside the same UINamingContainer parent, so JSF won't be able to locate it in the component tree. You need to specify a relative client ID details.
You have specified the ID on a plain vanilla HTML element instead of a real JSF component, so JSF won't be able to locate it in the component tree. You need to use a real JSF component. You need to replace <div> by <h:panelGroup layout="block">.
So, fix it both:
<h:form>
<div id="options">
<h:selectOneRadio value="#{cc.attrs.radioItem}" >
<f:selectItems value="#{cc.attrs.radioItems}" />
<f:ajax render="details" />
</h:selectOneRadio>
</div>
<h:panelGroup id="details" layout="block">
<h:graphicImage value="#{cc.attrs.compImage}"/>
<h:outputText value="#{cc.attrs.compSpecification}"/>
</h:panelGroup>
</h:form>
That it works with #form and #all is just because JSF can locate the element to be re-rendered relative to the component on which the ajax action is been invoked, namely the parent UIForm and UIViewRoot component respectively.

Resources