Attaching f:ajax to h:panelGroup - ajax

Whenever I try to attach a f:ajax to h:panelGroup I get an error:
Parent is not composite component or
of type ClientBehaviorHolder
I used to be able to do it with Richfaces and JSF 1.2.
Is there a workaround? Should I bring in Richfaces 4.0?
It's odd since it's obviously possible (I do it with jQuery for client side actions)
UPDATE
Richfaces 4.0 won't help. Tried it and get the same error.
Code Sample:
<li>
<f:param value="#{contact.getUUID}" name="currContactUUID" />
<f:ajax event="click" onevent="console.log('Event Happend in panelgroup')" >
<h:panelGroup styleclass="contacts_tab_contacts_list_quickview_box">
<h:outputText value="#{contact.firstName} #{contact.familyName}"/>
</h:panelGroup>
</ajax>
</li>

That shouldn't be possible for a panelGroup. f:ajax can only be used for components that implement the javax.faces.component.behavior.ClientBehaviorHolder interface and h:panelGroup doesn't.
You can wrap your components inside the panelGroup with a surrounding ajax tag:
<f:ajax>
... (your components here)
</f:ajax>

Related

f:ajax render form component

I want to render a single component (h:selectManyCheckbox) inside a form based on a check-box that I select or not.
<h:form>
<h:selectBooleanCheckbox value="#{bean.var}">
<f:ajax event="click" render="employeeCheckboxes" />
</h:selectBooleanCheckbox>
<h:selectManyCheckbox
id="employeeCheckboxes"
value="#{bean.checkboxes}"
rendered="#{var}">
</h:selectManyCheckbox>
</h:form>
However, the component isn't re-rendered on selecting or deselecting the check-box. I can however re-render the whole form but I don't want that.
You can't reference a component in <f:ajax render> which is in first place never rendered in HTML output. The <f:ajax render> uses under the covers JavaScript document.getElementById() to find the HTML element in order to update it with the new HTML structure from the ajax response. However, if a JSF component is in first place never rendered in HTML output, then JavaScript can't find it anywhere either.
You need to wrap it in another component which is always rendered.
<h:form>
<h:selectBooleanCheckbox value="#{bean.var}">
<f:ajax render="employeeCheckboxesGroup" />
</h:selectBooleanCheckbox>
<h:panelGroup id="employeeCheckboxesGroup">
<h:selectManyCheckbox
id="employeeCheckboxes"
value="#{bean.checkboxes}"
rendered="#{bean.var}">
</h:selectManyCheckbox>
</h:panelGroup>
</h:form>
(note that I removed event="click" as it's the default already)
See also:
Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
Hi i think you missed managed bean name in
rendered attribute
of checkbox tag.

h:inputtext not working with multiple forms in JSF2.2

h:inputText is not working in the latest JSF2.2 with multiple forms.
I have 2 forms
form1 have:
one command button and one input text
form2 has:
one input text and one output label
on click of command button in form1, i am rendering the form2(both outputlabel and input text).
but only output label is rendered properly with correct values (corresponding getter method gets called and value is displaying) but the input text is not calling the corresponding getter method hence showing null.
Note:
we noticed this issue only if we use multiple forms, within single form its working fine.
also it worked fine in JSF2.0
Version used:
JSF api - 2.2 (com.sun.faces)
JSF impl - 2.2 (com.sun.faces)
let me know if anyone have solution to handle this.
the forms are not nested and both the beans are in View scope.
<h:form id="form1">
<a4j:commandLink id="actionEdit" title="Click" action="#{bean.action}"
render="paymentInstructionDetail" styleClass="iconLarge edit" />
</h:form>
<h:form id="form2">
<a4j:outputPanel ajaxRendered="true" id="paymentInstructionDetail">
<h:inputText value="#{bean1.amount}" id="sample"/>
<h:outputLabel value="#{bean1.amount}" id="sampleLabel"/>
</a4j:outputPanel>
</h:form>
after the action is completed in form1, the form2 outputlabel is displaying the value properly(getter method is called) but the inputtext is not displaying the value (getter method is not getting called)
Hi john, to test whether the above issue is working fine without richfaces, i created a standalone project and create a xhtml as below
<h:body>
<h2>This is start.xhtml</h2>
<h:form>
<h:commandButton action="#{myBean.testAction}" value="Payment" >
<f:ajax render="sample"></f:ajax>
</h:commandButton>
</h:form>
<h:form id="test12" prependId="false">
<h:inputText value="#{myBean.orderQty}" id="sample"/>
</h:form>
</h:body>
but i am getting unknown id for sample, is there any way to check with multiple forms?
I am not familiar with richfaces (a4j), but try the following:
-If you don't use form prependId=false, then you should refer to your (other form) id's as: render=":form2:paymentInstructionDetail" styleClass="iconLarge edit" />
On another note:
-I don't think that richfaces is JSF2.2 ready yet, so expect problems
-Actually, JSF 2.2 has quite a few bugs of it's own

jsf listener not called inside nested ui:repeat

I have a problem using ui:repeat nested in each other where I'd like to call a listener. I have also tried c:forEach instead, but got the same problem.
For demonstrating the problem I have simplified the code to the problem.
There are two buttons, the first inside the first ui:repeat, calling successful a simple listener. The second button is inside the nested ui:repeat element, should call the same listener as the first button, but the listener is never called.
Can you please tell me whats wrong with this?
<div>
<ui:repeat var="testList" value="#{testBean.testList}">
<h:commandButton value="test1">
// the listener is called if I click this button
<f:ajax event="click" execute="#this" listener="#{testBean.testListener}" />
</h:commandButton>
<ui:repeat var="nestedList" value="#{testList.nestedList}">
<h:commandButton value="test2">
// the listener will not be called if I click this button
<f:ajax event="click" execute="#this" listener="#{testBean.testListener}" />
</h:commandButton>
</ui:repeat>
</ui:repeat>
</div>
This is a known Mojarra issue related to broken state management of <ui:repeat>. Specifically this issue is reported as issue 1817 and fixed since Mojarra 2.1.15.
Upgrade your Mojarra version. It's currently already at 2.1.19.

f:ajax does not update t:dataTable on complete

I have a JSF search command button and a tomahawk dataTable that showing the result from a search. When clicking on the command button, the dataTable should output the search result. Anyway, since I use the JSF Ajax, the dataTable doesn't show. I am just wondering whether JSF Ajax cause the problem?
Here is the problematic code that cause the table now render:
<h:commandButton id="search" value="#{msg.Label_Search}" action="#{theBean.doSearch}">
<f:ajax render="searchStatus" execute="#form" />
</h:commandButton>
<h:outputText id="searchStatus" value="Loading data now..." rendered="#{theBean.searchingNow}" />
<h:panelGroup id="searchResultTable">
<t:dataTable ... />
</h:panelGroup>
*Take note on this. If the ajax code were removed. It is working fine.
You're only updating the searchStatus, not the searchResultTable when the ajax request completes. So the enduser will indeed never see a visual change in the HTML representation of the searchResultTable.
Fix the <f:ajax render> accordingly so that the searchResultTable is also really updated:
<f:ajax render="searchStatus searchResultTable" execute="#form" />

How to refresh an element outside form with h:command ajax in jsf2?

How can I refresh an element outside the form through ajax render .
<ui:repeat var="o">
<h:form>
<h:panelGroup id="someid">
...
</h:panelGroup>
<div>
<h:commandButton action="#{o.doSomething}">
<f:ajax event="action" render="someid :rehreshthistoo" />
</h:commandButton>
</div>
<h:form>
</ui:repeat>
<h:panelGroup id="rehreshthistoo">
...
</h:panelGroup>
Your code looks fine. Although it would only work if the <h:panelGroup id="rehreshthistoo"> is not already by itself in another UINamingContainer component and also if you haven't changed the default JSF naming container separator of : to something else such as _ or -.
The ultimate answer should be found in the JSF-generated HTML source. Open the page in the browser, rightclick and View Source, locate the generated <span> element of <h:panelGroup id="rehreshthistoo"> in there and then use exactly its ID in your <f:ajax render> with the naming container separator as prefix. If it contains an auto-generated ID of some UINamingContainer parent, then you should give that parent component a fixed ID as well.
See also:
Communication in JSF 2.0 - Ajax rendering of content outside form

Resources