When I hit the commandButton it puts in the value that product.amount started as rather than what is currently typed in the input box.
<h:inputText value="#{product.amount}" />
<h:commandButton id="Button"
value="Buy"
tabindex="2" >
<f:ajax listener="#{shopBean.addToCart(product.product, product.amount)}"
execute="#this"
render="#all" />
</h:commandButton>
You need to include the input field in the execute attribute of the <f:ajax> so that it get processed as well, otherwise it will simply be ignored altogether.
<h:inputText id="amount" ... />
<h:commandButton ...>
<f:ajax execute="#this amount" ... />
</h:commandButton>
Or just put the whole in a single form and use execute="#form".
<h:form>
<h:inputText ... />
<h:commandButton ...>
<f:ajax execute="#form" ... />
</h:commandButton>
</h:form>
By the way, the render="#all" defeats one of the main advantages of using ajax. Try to render exactly only the component(s) which actually needs to be updated.
Related
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.
I have a following test composite component:
<composite:interface>
<composite:clientBehavior event="click" targets="#{cc.clientId}:label"
name="click" />
</composite:interface>
<composite:implementation>
<h:outputLabel value="click here" id="label" style="background-color: red" />
</composite:implementation>
and when I use it attaching f:ajax client behavior my listener method is not called on server side, but POST request reaches the server. I noticed that when I don't specify f:ajax's execute attribute or specify it as "#this" listener is not called, but with execute="#form" or "#all" it works.
These examples don't work:
<h:form>
<t:testComposite>
<f:ajax event="click" listener="#{bean.test}" />
</t:testComposite>
</h:form>
<h:form>
<t:testComposite>
<f:ajax event="click" listener="#{bean.test}" execute="#this"/>
</t:testComposite>
</h:form>
These examples work:
<h:form>
<t:testComposite>
<f:ajax event="click" listener="#{bean.test}" execute="#form" />
</t:testComposite>
</h:form>
<h:form>
<t:testComposite>
<f:ajax event="click" listener="#{bean.test}" execute="#all" />
</t:testComposite>
</h:form>
<h:form id="form">
<h:panelGroup id="group">
<t:testComposite>
<f:ajax event="click" listener="#{bean.test}" execute=":form:group" />
</t:testComposite>
</h:panelGroup>
</h:form>
I tested it on tomcat 7 with myfaces 2.1.12 and jboss as7 with mojarra 2.1.18.
My question is: why doesn't f:ajax work with execute="#this" when attached to a composite component?
The base of the targets is implicit, so targets="#{cc.clientId}:label" is not necessary. You should use targets="label" instead.
It is hard to explain, but the reason why targets="#{cc.clientId}:label" does not work is because the EL expression is calculated ouside the context or is evaluated before the component tree is built, so in this case for example, when it tries to derive the parent component, the child has not been attached to the view yet.
The general rule is don't call getClientId() when facelet is building the tree (inside a facelet TagHandler for example), and instead use a listener attached to PostAddToViewEvent for that.
I have a jsf page with
<h:inputText required="true"> attribute.
When I click on my add button, I want to see an error if the field is blank.
I have a <f:message> to display this.
But how can I escape (cancel) the page with that field blank? In my case it continually posts the error message and I have to enter something in the field to go to another page.
If your cancel button is a POST requests e.g. <p:commandButton>,<h:commandButton>, <p:commandLink>, or <h:commandLink>
You can put your cancel button outside the form that has the <h:inputText> so that form is not submitted
<h:form>
<h:inputText value="#{bean.string}" required="true"/>
</h:form>
<h:form>
<p:commandButton value="Cancel" action="anotherpage.xhtml"/>
</h:form>
If you are navigating without any actions or method invocation, then you can use GET requests e.g. <h:button>, <p:button>, <h:link> or <h:outputLink>.
Example:
<h:form>
<h:inputText value="#{bean.string}" required="true"/>
<p:button value="Cancel" outcome="anotherpage.xhtml"/>
</h:form>
You can use immediate="true" in your <p:commandButton>. Then it will skip the validation.
For example:
<p:commandButton action="#{managedBean.action}" value="Cancel" immediate="true" />
Just don't process the form on submit if you want to cancel or navigate away.
I.e. don't do
<h:form>
...
<p:commandButton value="Cancel" action="#{bean.cancel}" />
</h:form>
But just do
<h:form>
...
<p:commandButton value="Cancel" action="#{bean.cancel}" process="#this" />
</h:form>
Or, better if you're only returning a navigation outcome in cancel() method anyway
<h:form>
...
<p:button value="Cancel" outcome="otherpage.xhtml" />
</h:form>
i'm trying to use an search button which brings back the selected items (can be more than one) and it updates the datatable. Then i have a selectBooleanCheckbox next to each colomn, when user selects "n" items then presses the Select the checked Items it insert DB.
The code can be seen below:
<h:panelGrid columns="5">
<h:form>
<h:outputText value="Item Name"/>
<p:inputText value="#{StockController.itemName}"/>
<h:commandButton value="Search" action="#{StockController.Search}">
<f:ajax execute="#form" render=":results"/>
</h:commandButton>
</h:form>
//The code sample below belongs to BalusC see the post here
<h:panelGroup id="results">
<h:form>
<h:dataTable value="#{bean.entities}" var="entity">
<h:column>
<h:selectBooleanCheckbox value="#{bean.checked[entity.id]}" />
</h:column>
...
</h:dataTable>
<h:commandButton value="Select the checked Items" action="#{StockController.insertDao}" >
<f:ajax execute="#form" render=":results"/>
</h:commandButton>
</h:form>
</h:panelGrid>
Now, i have read many blogs and Core javaServer Faces 3, i don't think there is logical error in ajax usage. I tested by removing each ajax then both works fine but whenever i try to use both of cummondButtons with ajax, the second one "Select the checked Items" does not even call the "StockController.insertDao" method.
Any help is appreciated.
Thanks all.
When you want to ajax-render content which in turn contains another form, then you need to include the ID of that form in the render attribute as well, otherwise the other form will lose its view state and nothing will be processed on submit.
<h:form>
...
<h:commandButton value="Search" action="#{StockController.Search}">
<f:ajax execute="#form" render=":results :resultsForm" />
</h:commandButton>
</h:form>
<h:panelGroup id="results">
<h:form id="resultsForm">
...
</h:form>
</h:panelGroup>
If there's however nothing which goes outside <h:form> inside the same <h:panelGroup>, then you can just omit the <h:panelGroup> altogether and re-render the form directly.
<h:form>
...
<h:commandButton value="Search" action="#{StockController.Search}">
<f:ajax execute="#form" render=":results" />
</h:commandButton>
</h:form>
<h:form id="results">
...
</h:form>
This is related to JSF spec issue 790.
See also:
Communication in JSF2 - Ajax rendering of content which contains another form
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 :)