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
Related
I have two forms (one for some filter-settings, and the other for the content)
If I set some filter settings in the first form (e.g. "show only not empty chapters") with
<h:form>
<!-- some checkboxes -->
<h:commandButton value="Save filter settings" id="filterBUtton">
<f:ajax event="click" execute="#form" render="#all" listener="#{bean.saveFilter}"/>
</h:commandButton>
</h:form>
and try to execute a actionlistener from the second form (e.g. to display all found chapters), it doen't execute the command as ajax request (the view is lost somehow?) - and then my Filters say "stop! you are not an ajax request, so you can't pass here"
here is my second form (which is, like the first one, received from template):
<h:form>
#{bean.foundChapters} have been found. Show them now?
<h:commandButton value="Show them!" id="showThem">
<f:ajax event="click" render=":result" listener="#{bean.loadAndShowChapters}"/>
</h:commandButton>
</h:form>
<h:panelGrid id="result">
<!-- List of results... -->
</panelGrid>
here is my second method which makes the view crash (and is not submitted by ajax) (the first has a similar interface):
public void loadAndShowChapters(AjaxBehaviorEvent event){
System.out.println("force:true");
forceLoad = true;
doQuery(); //does the loading (so the results can be displayed in
}
The funny thing is that if I move the 'showThem' Button from form 2 to form 1, it works fine. Seems it has problems handling two forms? Two forms can't be a problem, am I right?
Can anyone help here pls?
thanks for your anwser,
I have solved it by
adding a ID to the form and
solve a Javascript-problem (it tried to find a element by document.getElementById('notExistantForm:element') onclick. After correctly defining the id, it worked again!
So I have 2 forms and a command button with f:ajax attached on it. I want to execute the second form on click on button but it seems that it ignores when I'm passing the form's id on execute attribute. But when I replace it with 'execute=":form1"' it runs correctly(the information from the form is sent to server). Can someone tell me why won't work with the id of second form, or how can I achieve this: with one button to execute any form i want from the page.( as it is now no information is sent to server, only the listener is called).
Code bellow:
<h:form id="form1">
<h:panelGrid id="inputSection" >
<h:inputText id="input1" value="#{counterMB.number1}" />
<h:inputText id="input2" value="#{counterMB.number2}" />
</h:panelGrid>
<h:outputLabel id="sumResponse2" value="#{counterMB.sum}" />
</h:form>
<h:form id="form2">
<h:panelGrid id="inputSection" >
<h:inputText id="input1" value="#{counterMB.number1}" />
<h:inputText id="input2" value="#{counterMB.number2}" />
</h:panelGrid>
<h:outputLabel id="sumResponse2" value="#{counterMB.sum}" />
</h:form>
<h:commandButton value="Sum numbers">
<f:ajax event="click" execute=":form2" listener="#{counterMB.sum}" render=":form2 :form1"/>
</h:commandButton>
Update:
so to be more explicit: from what I have read I can use ajax to update/refresh etc some parts of a page instead of refreshing the whole page. What i have tried to do is group some components in different forms and execute a form at a time to see how it behaves. It works perfectly if I use the id of first group(form) but doesn't work at all if I use the id of the second form(it calls the action but doesn't submit any data from any form). I don't understand why. (PS for those who claim i lack some knowledge : this is the reason of asking questions isn't it? I'm trying to learn some new stuff)
It seems that you are lacking basic knowledge of how jsf works. A command button must be inside a form. And it's not possible to submit 2 forms with one single button.
The attribute execute of f:ajax tells which components to process, for example if you have 2 input texts, you can process only one and ignore the other using this attribute. but it's not possible to do what you are trying to do.
It doesn't really make sense to submit 2 forms and execute a single action method once.. there's no point in having 2 forms. why don't you put everything inside a single form?
In your current solution, you use a h:commandButton outside of any h:form - this is a little bit against HTML and JSF, so don't count on it. What I would suggest is
if you use Richfaces, put a a4f:jsFunction in every form and trigger the resulting Javascript from anywhere
if you use Primefaces, put a p:remoteCommand in every form and trigger the resulting javascript from anywhere
if you neither use any of them, put a <h:commandButton /> in every form, set the style hidden and use javascript to submit the form.
Hope it helps...
I've got a problem considering updating my backing-bean within an ajax-roundtrip in a JSF2 application if the value is bound to a html5 input type=email.
First of all, I created an "Html5InputRenderer", so that the JSF-runtime can create the html5-markup for a , in order to write
The central "magic" the "Html5InputRenderer does is:
markup.replaceAll("type=\"text\"", "type=\"email\"");
within the overridden method encodeEnd(..) of javax.faces.renderer.Renderer.
This h:input is put in to a form and enriched with f:ajax:
<h:form id="form">
<f:ajax render="testOut">
<h:inputText id="test" renderedType="email" value="#{testBean.value}" />
</f:ajax>
<h:outputText id="testOut" value="#{testBean.value}" />
</h:form>
The atribute 'renderedType' is the hint for the JSF-"Html5InputRenderer" to render the html5 markup for the h:input
Test the snippet. It will not update #{testBean.value} although an ajax roundtrip is invoked by the JSF-runtime.
Test the snippet removing the attribute 'renderedType', everything works like expected.
I want to implement custom filtering on a p:dataTable. In the header of the dataTable, I have a p:inputText that I want to filter the table via ajax. The problem I am having is that the bean method is not being called by the p:ajax tag. Here is the offending code snippet:
<h:form id="form1">
<p:dataTable id="selectTable" var="select"
selectionMode="multiple" rowKey="#{select.id}"
value="#{pc_Selectcourses.allCourses}">
<f:facet name="header">
<p:outputPanel>
Search For Courses Completed:
<p:inputText id="filterEntry" value="#{pc_Selectcourses.query}">
<p:ajax event="keyup" update=":form1:selectTable"
listener="#{pc_Selectcourses.filterListener}" />
</p:inputText>
</p:outputPanel>
</f:facet>
<!-- table columns here, etc. -->
</p:dataTable>
</h:form>
And the backing bean:
public void filterListener() {
System.out.println("Hello world, hope you're listening...");
}
When I type in the inputText, the Sysout is never printed. I also notice that my ajax notifier/status icon doesn't show any activity, so I doubt anything is happening.
Edit
I just tried dragging and dropping p:ajax from Eclipse's Palette into my xhtml code and it said to use this I needed to import libraries into my workspace. I let it go ahead and it added primefaces v3.2 jar file into Web_INF/lib. The p:ajax still doesn't work.
I am confused as to why it asked for this as all the Primefaces components have been working great all along. Is there possibly something wrong with the project setup?
I saw this same problem today. It turns out that in your backing bean, if you have a getter function for query but NOT a setter function, p:ajax won't call its listener. Since you didn't post that section of your Java code, I assume there's a good chance this is your problem.
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>