<f:ajax> executing different forms - ajax

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...

Related

JSF 2.0 Ajax fails when I submit data from two different forms

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!

Multiple h:inputTextarea to single back-end variable

I'm trying to create a comment page with a variable set of comments (layed out via o:tree, thanks BalusC) that anyone can reply to. I'm displaying the h:inputTextArea via p:inplace, so there are multiple textinputareas per page with multiple commandbutton replies. I'm trying to map the command button to a single back-end variable from a specific textinputarea so that every textinputarea isn't processed each time the command button is pressed.
Edit: Code example
<o:tree value="#{xPost.post.comments.treeModel}" var="comment" varNode="node">
<o:treeNode>
<o:treeNodeItem>
<p:panel>
<h:outputText value="#{comment.commentText}" />
<p:inplace label="Reply">
<br/>
<p:editor value="#{post.newComment}" />
<p:commandButton action="#{post.saveComment('#{comment.ID'})}" value="Comment" ajax="false" />
</p:inplace>
<o:treeInsertChildren />
</p:panel>
</o:treeNodeItem>
</o:treeNode>
</o:tree>
To add to this, I'm using hibernate validation, which to my knowledge can only validate via annotations:
#NotBlank(message="Please enter a comment.")
#Length(min=1, max=10000, message="A comment must be between 1 and 10,000 characters.")
#SafeHtml(message="Invalid Rich Text.")
private String newComment = "";
So from the code above, when I have 2+ p:editor, each editor is being processed and populating the same back-bean variable. How do I force a commentButton to only validate a specific inputBox/p:editor and set the backing-bean variable.
Thank you for your help.
Just give each editor its own form. In other words, move the <h:form> from outside the <o:tree> to inside the <o:treeNodeItem>. This will ultimately render multiple forms with each its own editor and button.
You need to provide your source details for people to give you more help
In your case, I'm guessing the following should do the trick:
<ui:repeat var="comment" ...> // or equivalent like o:tree
<h:inputText value="#{comment.message} .../>
<h:commandButton actionListener="#{bean.updateMessage}">
<f:setPropertyActionListener from="#{comment}" to="#{bean.commentBeingProcessed}"/>
<!-- Or alternatively, you can set the comment object on to the command button
and receive it on the server side as event.getComponent().getAttribute("comment")
<f:attribute name="comment" value="#{comment}"/>
-->
</h:commandButton>
</ui:repeat>
Hope that helps.

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

How to execute another <h:form> using <f:ajax>?

I've noticed that this doesn't work for me and I'm wondering if it's just not possible:
<h:form id="one" prependid="false" >
<h:commandButton>
<f:ajax execute=":two">
</h:commandButton>
</h:form>
<h:form id="two" prependid="false">
... content ...
</h:form>
Whenever I click the button above ,I can see that the values on form two are not executed as expected.
Is this the normal JSF behavior?
To 'trick' it, I usually insert a hidden button in form two and trigger it using JavaScript code when the button in form one is clicked. But that's a 'trick' and makes me work extra when I'm not sure I have to.
I should mention the rendering another form is possible.
Could the prependid attribute be causing problems?
Thanks in Advance!
UPDATE Adding more information that might be relevant - adding the prependid="false" to the forms as it is used in the actual code.
No, that's not possible with <f:ajax>. It just submits the parent form. The execute merely tells JSF which components it has to process based on the submitted data, not which request parameters the client side have to send. The button has really to go in the form where it belongs.

How to inject one JSF2 page into another with jQuery's AJAX

I'm using jQuery's .load function to load one JSF page into another.
This works really well until the loaded JSF page uses some AJAX functionality. When this happens, the parent JSF page's AJAX stops working. In fact, after the two pages are combined whichever page has its AJAX called next is the one that continues to work. The other page stops working. If I use the parent page first, the child breaks. If I use the child first, the parent breaks.
Am I doing something wrong? I'm guessing JSF isn't designed for this sort of behaviour and that's fine but then how do I go about doing what I want?
Basically, we have a report page. When the user clicks the link to a report we would like the report to load dynamically into the existing page. That way, the user doesn't experience a page refresh. It's a pretty slick behaviour BUT obviously isn't ideal due to the pages breaking.
I suppose I could do this with a page that contains every report in an outputpanel and then determine which one is rendered based on a value in the backing bean but I can see lots of occasions where I'd like to be able to "inject" one page into another (for dynamic dialogs for instance) and it would suck to have to keep everything in one giant template.
Has anyone else come across this sort of problem? How did you solve it?
Do not use jQuery.load(). It does not take JSF view state into account at all, so all forms will fail to work. Rather make use of <f:ajax> and rendered attribute instead. Here's a basic example:
<h:form id="list">
<h:dataTable value="#{bean.reports}" var="report">
<h:column>#{report.name}</h:column>
<h:column>
<h:commandLink value="Edit" action="#{bean.edit(report)}">
<f:ajax render=":edit" />
</h:commandLink>
</h:column>
</h:dataTable>
</h:form>
<h:form id="edit">
<h:panelGrid columns="3" rendered="#{not empty bean.report}">
<h:outputLabel for="name" value="Name" />
<h:inputText id="name" value="#{bean.report.name}" required="true" />
<h:message for="name" />
...
<h:panelGroup />
<h:commandButton value="save" action="#{bean.save}" />
<h:messages globalOnly="true" layout="table" />
</h:panelGrid>
</h:form>
You can if necessary split off the content into an <ui:include>.

Resources