I have been doing school's project recently and started learning Java Web/Spring/Bootstrap and stuff only a week ago, so please do forgive and correct me if I got any idea wrong.
So I was working on some webpage following an online tutorial and it's really great that I can fetch user's input by using Thymeleaf tags like codes below
<div class="ip input-group" align="center">
<input id="username" type="text" class="form-control" name="username" placeholder="Username" th:value="*{username}"/>
</div>
Though I'm having a hard time trying to fetch input from select box or radio button like codes below (am I doing anything wrong here?)
<div class="input-group">
<select class="btn btn-default" th:value="*{sex}">
<option>Male</option>
<option>Fmale</option>
<option>Other</option>
</select>
</div>
Since it's able to fetch input from simple input area, I'm thinking that there should be a way to acquire input or data from select box or radio button by using Thymeleaf?
th:field tag should be in <select> tag, but it does not exist.
th:value tag should be in <option> tag, not in <select> tag.
As described in thymeleaf docs:
Select fields have two parts: the tag and its nested
tags. When creating this kind of field, only the tag has to
include a th:field attribute, but the th:value attributes in the
nested tags will be very important because they will provide
the means of knowing which is the currently selected option (in a
similar way to non-boolean checkboxes and radio buttons).
Code snipped in source
Related
I want to write a part of a website that lets the user alter the data of a pre existing book. For that, I am trying to use a form which works fine. I just can't figure out how to get the form to display data in the editing fields so the user doesn't have to enter everything again but can simply change some details. My HTML code looks like this:
<form method="post" role="form" class="ui form" id="bookForm" th:action="#{/editBook}" th:object="${bookForm}">
<div class="field">
<label for="name">Book</label>
<input id="name" name="name" th:field="*{name}" th:errorclass="fieldError" type="text" required="required"/><br/>
</div>
I include some more code about errors and other things but this is basically where I want the form not only to pass values to my java file but also to take values about the book and display them in the editing fields.
I think I need to pass the book that the user wants to edit into this form but I'm not sure how. I have tried:
<input type="hidden" id="currentBook" name="currentBook" th:value="${currentBook}"/>
right before the "div" statement and then passing the "currentBook" into HTML with
model.addAttribute("currentBook", currentBook);
in my #GetMapping method of that website. I then changed the "input" statement in my field as well to
<input id="name" name="name" th:field="*{name}" th:value="${currentBook.name}" th:errorclass="fieldError" type="text" required="required"/><br/>
currentBook.name will give me the name of that book just not within this context. Does anyone know what I'm doing wrong and how it will work?
Thank you in advance!
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
i have one view where i m showing many records and now i m adding functionality for user to download those records which he will choose date from search textbox. As my search textbox in jsp outside of form tag and thus i m not getting the value of that parameter in my servlet..is there any way to get that value from outside of form tag? Here is my jsp
<div id="divOfDateTable">
Search:<input type="text" name="dropdown" id="datedropdown">
<button id="dateButton" name="dateSearch">Search</button>
</div>
<form action="Download_Servlet" class="download" method="post">
<input type="submit" id="downloadRecords" value="Download Order-records">
</form>
In my Servlet i want to get that parameter value.i.e;Date put by user.As per the requirement only the searched records by the user needs to be downoaded. So please guys help out..
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 the following html:
<label wicket:id="drugSearchResult.row.item.label" for="drug_1">[Drug XYZ]
<span wicket:id="drugSearchResult.row.item.info">[Information, Price, Other]</span>
</label>
But label element are not allowed to add a child component.
Is there any way to achieve this html requirement?
This is the designer's requirement:
Drug XYZ // label
Information, Price, Other // span
Make sure you're using FormComponentLabel for the <label> element instead of Label.
Label's purpose is to output text inside the associated element (it can be a <span>, <div> or almost any other tag).
FormComponentLabel's purpose is to model <label> tags. They receive the FormComponent they're related to and automatically output the for attribute with the proper value for the dom id attribute.
Take a look at the Wicket wiki page on Form control labels. They're adding components to FormComponentLabel there.
If you'd like to avoid using FormComponentLabel at all, you shouldn't be giving it a wicket:id attribute, and manually set the DOM id attribute of the element the <label> is going to refer to. Then just use it in the for attribute of the <label>.
For instance:
HTML
<input wicket:id="drug">
<label for="drug_1">[Drug XYZ]
<span wicket:id="drugSearchResult.row.item.info">[Information, Price, Other]</span>
</label>
Java
TextField drug = new TextField("drug");
drug.setMarkupId("drug_1"); // Make sure this ID is unique in the page!
drug.setOutputMarkupId(true);
add(drug);
Label drugDescription = new Label("drugSearchResult.row.item.label", aModel);
add(drugDescription);
Using properties and <wicket:message>
For me, the approach below is useful.
In my project, I have only one location per page where the text for the <label>s and validation messages is defined. It's the properties file of the web page.
The additional <div>s and their class attributes are from Bootstrap.
<div class="form-group required">
<label wicket:for="customer.name1">
<wicket:message key="customer.name1"/>
</label>
<div class="controls">
<input type="text" wicket:id="customer.name1" required class="form-control">
</div>
</div>
Java
add(new RequiredTextField<String>("customer.name1")
.setLabel(new StringResourceModel("customer.name1")));
customerPage.properties
# siehe wicket-core-7.9.0-sources.jar!/org/apache/wicket/Application_de.properties
Required='${label}' ist erforderlich
customer.name1=Name 1
customer.name2=Name 2
customer.department=Abteilung
customer.phone=Telefon
customer.active=aktiv