I'm stuck at pretty simple task: I have a search form where the search criteria are stored is SearchCriteriaSession bean, so it could be remembered and pre-filled. And I want to add reset button to that form that would:
1) clear the criteria from bean, therefore call clearSearchCriteria() method of the bean
2) rerender the form, so the fields would be empty
Here's my code and I have no idea why it's not working:
search.xhtml
...
<h:form id="criteriaForm">
<div class="controls">
<h:inputText type="text" id="testName" value="#handlingBean.criteria.testName}" />
</div>
//more input fields but with same format
<div class="form-actions">
<r:commandButton action="#searchCriteriaSession.clearSearchCriteria}" value="Reset" render="#form :criteriaForm" />
</div>
</h:form>
...
The searchCriteriaSession.clearSearchCriteria just clears criteria. When I debug it I see it correctly cleared. Even when I refresh the page the form clears, so the problem is that the render attribute is not working correctly, I guess.
Does anybody can please help me?
P.S.: I'm using RichFaces, this maven artifact:
<dependency>
<groupId>org.richfaces.compat</groupId>
<artifactId>richfaces-components-rich</artifactId>
<version>4.5.0.Alpha2</version>
</dependency>
Your render attribute needs only #form
<r:commandButton action="#searchCriteriaSession.clearSearchCriteria}" value="Reset" render="#form" />
Related
Trying to add text with a style on error validation in a bootstrap form
This is part of the form:
<label th:text="#{name}"
class="col-form-label col-form-label-sm"></label>
<input
type="text" class="form-control form-control-sm"
th:field="*{name}" />
<span
th:if="${#fields.hasErrors('name')}" th:errors="*{name}"
th:class="invalid-feedback">Here there is an error</span>
I get the message on validation error, but without styles.
If I debug I see the class with the style:
<span class="invalid-feedback">Here there is an error</span>
I have tried with severals styles like help-block but no way.
I'm using bootstrap4.0.0-alpha.6
Any idea?
Thanks
In case you are still interested.
Bootstrap's current validation docs give you three approaches: client-side custom validation, browser defaults and server-side validation.
From your post I will assume you're using server side, meaning that you are sending the data to be validated in your server code for then showing the error fields when the form is re-rendered.
In that case, remember that for bootstrap's styles to kick in, a certain html structure is expected from your code, example:
<input th:field ="*{email}" type="email" class="form-control"
th:classappend="${not #lists.isEmpty(#fields.errors('email'))} ? is-invalid"
required>
<div class="invalid-feedback">
<p th:each="error: ${#fields.errors('email')}" th:text="${error}">Invalid data</p>
</div>
(I believe a span tag will work too for <div class="invalid-feedback">)
That is a minimal necessary structure for the error styles to work. What happens:
Initially, invalid-feedback is assigned display: none
The form is submitted, if it has an error it'll be re-rendered and it's up to the developer to provide a mechanism which will include is-invalid in the class attribute of every <input class="form-control"/> with an error. In the previous code, th:classappend="${not #lists.isEmpty(#fields.errors('email'))} ? is-invalid" is responsible for that to happen. (I'm new to Spring and Thymeleaf, so there could be a neater code for this)
Declaration .form-control.is-invalid~.invalid-feedback in _forms.scss will kick in and assign display: block to <div class="invalid-feedback">, thus showing each field's error message (s).
That should be enough to show the error (s) under each field and highlight them in red.
HIH
When I want to "delete a plane" from my jsf page, if successful the plane deletes, and I do a redirect to the page and show an alert telling the user the plane was succesfully deleted. However, the values the user entered in the h:inputText are still there, they dont empty.
JSF Page:
<h:form>
<h:panelGrid columns="3" class="table">
<h:outputLabel value="Plane ID" />
<h:inputText value="#{listAirplaneBB.airPlaneId}"/>
<h:commandButton value="Delete"
class="btn btn-primary"
action="#{addAirplaneCtrl.deleteAirplane}" />
</h:panelGrid>
</h:form>
Bean code:
public String deleteAirplane(){
//delete the plane
return private/user?faces-redirect=true;
}
Any ideas on why the fields dont empty after redirect?
Maybe your listAirplaneBB is a #ViewScoped bean (cant tell by your example).
In that case you have to clean any particular fields manually before redirecting as JSF keeps alive that bean while the target page has not changed.
I'm trying to use thymeleaf to generate edit and delete modals for each element in the model in my ModelAndView using th:each.
The modals are indeed created and have unique ids based on the id field of the elements. The problem I have is none of the values from elements are parsed into the inputs to enable the user to see the current values.
They are obviously there because the view also has a table which displays each element's values along with the anchors which toggle the modals.
Here's some example code of how I'm doing it:
<div th:each="f : ${foos}" th:id="um- + ${f.id}" class="modal fade"
tabindex="-1" role="dialog">
...
<form role="form" th:action="#{/foo/update}" th:object="${foo}" th:method="post">
<input type="hidden" th:field="*{id}" th:value="${f.id}"/>
<fieldset class="form-group">
<label for="bar">Bar</label>
<input th:field="*{bar}" th:value="${f.bar}" class="form-control"
id="bar" type="text" placeholder="Bar"/>
</fieldset>
...
</form>
...
</div>
How to generate edit modals for each element in the model? I'm not sure why thymeleaf is unable to get the values of the fields from the model elements.
That's not a great approach actually. In addition to it not working, doing using a loop obviously creates n modals for the collection.
The solution that worked best was to provide a single modal that would be populated and submitted with Ajax calls.
This no-frills Spring Boot app has all the relavant code.
I have a situation where I am suppose to submit a user's payment details to my payment gateway partner.
For this I have a separate non JSF form with hidden values as parameters to be passed.
<form id="hiddenForm" action="#{checkoutBean.payuAction}" method="post" name="payuForm">
<p:outputPanel id="hiddenPanel">
<h:inputHidden id="hash" value="#{checkoutBean.hash}"/>
<h:inputHidden id="txnid" value="#{checkoutBean.txnid}"/>
<h:inputHidden id="amount" value="#{checkoutBean.totoalAmount}"/>
<h:inputHidden id="firstname" value="#{checkoutBean.firstname}"/>
<h:inputHidden id="email" value="#{checkoutBean.email}"/>
<h:inputHidden id="phone" value="#{checkoutBean.phone}"/>
<h:inputHidden id="productinfo" value="#{checkoutBean.productInfo}"/>
<h:inputHidden id="surl" value="#{checkoutBean.sURL}" />
<h:inputHidden id="furl" value="#{checkoutBean.fURL}"/>
</p:outputPanel>
</form>
The above hidden values are generated using ajax at the last step in a wizard (primefaces). The ajax call is happening but I am unable to update the non JSF form. The values are null.
<p:commandButton value="Confirm" actionListener="#{checkoutBean.initPayu}" onsuccess="submitPayuForm()" update=":hiddenForm:hiddenPanel" />
The above button is in a <h:form>.
Now i believe that it is not possible to update non JSF components from JSF components. But I just can't figure out how to tackle this scenario.
Any ideas on how I can tackle this problem?
Using : JSF 2 , Primefaces 3.3
Thanks a ton in advance.
Since your form is not a JSF component you don't need to append its id to ids of your JSF components (:hiddenForm:hiddenPanel).
In other words, try something like this:
<p:commandButton ... update="hiddenPanel" />
So I have an anchor element, and it's href attribute is set dynamically from the bean. I am using an anchor since it is interacting with fancybox javascript. What I need to have happen is to call a method in the bean when the anchor is clicked so that the href will update again. There is a textbox above that is also bound to bean. What needs to happen is to take the text from the text box, and parse that into a query string for the anchor's href.
I'm trying to figure out the best way to have this happen (if it is possible). Would I be able to use javascript (or Ajax) to call an updateHref() method?
The textbox and anchor element (it's ModelBean.ending that needs to be updated):
<h:inputTextarea value="#{ModelBean.tweet}" class="textarea.hs-input #{ModelBean.tweetClass}" style="width:200px;" >
<f:facet name="label">
Tweet
</f:facet>
</h:inputTextarea>
</td>
</tr>
<tr>
<td>
<h:commandButton value="Analyze Tweet" class="hs-button orange" action="#{ModelBean.tweetAnalysis()}" />
</td>
<td>
<a href="https://app.hubspot.com/social/#{ModelBean.hubID}/publishing/compose_bookmarklet?body=#{ModelBean.ending}" class="hs-button primary fancybox-iframe" data-fancybox-type="iframe" >
Tweet it!
</a>
</td>
</tr>
Here's the bit of java that would need to be called:
ending = URLEncoder.encode(tweet, "UTF-8");
ending = ending.replaceAll("\\+", "%20");
If you think any other part of the code would be useful please let me know! And thanks in advance for any suggestions!
If you use JSF 2.0, f:ajax tag may solve your problem. Here is sample usege of f:ajax tag,
<h:commandLink value="#{..}">
<f:ajax execute="name" render="output" />
</h:commandLink>
<h:inputTextarea id="output" value="#{..}" />
execute=”name” – Indicate the form component with an Id of “name” will be sent to the server for processing. For multiple components, just split it with a space in between, e.g execute=”name anotherId anotherxxId”. In this case, it will submit the text box value.
render=”output” – After the Ajax request, it will refresh the component with an id of “output“. In this case, after the Ajax request is finished, it will refresh the h:inputTextarea component.