I'm learning java and I'm practicing with thymeleaf. I made an little app where I have a list of persons (arraylist). I can add a person through a form but also edit a person from the list to update the person's firstname, lastname or birthdate through a form. Here is my problem I want when I edit a person to have its default values(firstname, lastname, bithdate) on the update form so that we can then change only the fields of interest. I have this code:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Update Person</title>
<link rel="stylesheet" type="text/css" th:href="#{/css/style.css}"/>
</head>
<body>
<h1>Update a Person:</h1>
<!-- some tests I made to test if the value appears in the field -->
<!-- <input type="text" name="id" th:value="${person.id}" /> -->
<!-- <input type = "text" name = "firstName" th:value = "${person.firstName}" /> -->
<!-- <input type = "text" name = "sometext" th:value = "hello world" /> -->
<form th:action="#{/updatePerson/{id}(id=${person.id})}"
th:object="${person}" method="POST">
First Name:
<input type="text" th:field="*{firstName}"/>
<br/>
Last Name:
<input type="text" th:field="*{lastName}" />
<br/>
Date of Birth (DD/MM/YYYY):
<input type="date" th:field="*{birthDate}" />
<br/>
ID:
<input type="text" th:field="*{id}" />
<br/>
<input type="submit" value="Update" />
</form>
<br/>
<!-- Check if errorMessage is not null and not empty -->
<div th:if="${errorMessage}" th:utext="${errorMessage}"
style="color:red;font-style:italic;">
...
</div>
</body>
</html>
None of my default values appears in the fields except for the id. Whether I use th:field="{id}" or name="id" th:value="${person.id}". Both synthax work but the others (ie: th:field="{firstName}" or name = "firstName" th:value = "${person.firstName}" same goes for lastname and birthdate), nothing works. I even tried th:value = "hello world" (commented in the above code), it does appear! So why my person firstname, lastname, bithdate don't appear? What is wrong? My person.list html works though:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Person List</title>
<link rel="stylesheet" type="text/css" th:href="#{/css/style.css}"/>
</head>
<body>
<h1>Person List</h1>
Add Person
<br/><br/>
<div>
<table border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Date of Birth</th>
<th>Edit</th>
<th>Delete Name</th>
</tr>
<tr th:each ="person : ${list}">
<td th:utext="${person.firstName}">...</td>
<td th:utext="${person.lastName}">...</td>
<td th:text="${#temporals.format(person.birthDate,'dd-MM-yyyy')}">...</td>
<td><a th:href="#{/updatePerson/{id}(id=${person.id})}">
<span>
<img src="https://img.icons8.com/clouds/40/000000/edit.png">
</span>
</a></td>
<td>
<form th:action="#{/deletePerson}" th:method="POST">
<input type = "hidden" name = "firstName" th:value = "${person.firstName}" />
<input type = "hidden" name = "lastName" th:value = "${person.lastName}" />
<input type = "hidden" name = "id" th:value = "${person.id}" />
<input type = "hidden" name = "birthDate" th:value = "${person.birthDate}" />
<button type = "submit" >
<span>
<img src="https://img.icons8.com/metro/26/000000/delete.png" />
</span>
</button>
</form>
</td>
</tr>
</table>
</div>
<div>
<form th:action="#{/changeDao}" th:method="POST">
<select name="daoChoice">
<option th:value="none" disabled>Choisissez votre Dao</option>
<option id="jdbc" th:value="JDBC">Jdbc</option>
<option id="memory" th:value="MEMORY" th:selected="${isMemory}">Memory</option>
</select>
<button type="submit">Valider</button>
</form>
</div>
<div>
<form th:action="#{/excelLoad}" th:method="GET">
<button type="submit">Local Load</button>
</form>
</div>
<div>
<form th:action="#{/UploadFile}" method="POST" enctype="multipart/form-data">
<table>
<tr>
<td><label>Upload and Add to the table</label></td>
<td><input type="file" th:value = "file" th:name="file" /></td>
</tr>
<tr>
<td><input type="submit" value="Upload" /></td>
</tr>
</table>
</form>
</div>
<div>
<form th:action="#{/exportToExcel}" th:method="POST">
<button type="submit">Export to Excel</button>
</form>
</div>
</body>
</html>
Above my personList.html, person's firstName lastName and birthdate is printed correctly with this code:
<tr th:each ="person : ${list}">
<td th:utext="${person.firstName}">...</td>
<td th:utext="${person.lastName}">...</td>
<td th:text="${#temporals.format(person.birthDate,'dd-MM-yyyy')}">...</td>
but why in my update form this is not working ?
I'm a newbie in java programming and also in thymeleaf (also newbie), so I'd really appreciate some explanations along some tips! thanks a lot!
I found it with another post where there was a simple explanation about the key/value pair in modelAddAttribute:
You can access variables value by ${key}.
Example
model.addAttribute("key", value);
Understanding that I found my mistake in my controller:
#RequestMapping(value = { "/updatePerson/{id}" }, method = RequestMethod.GET)
public String showUpdatePersonPage(#PathVariable("id") int id, Person person, Model model) {
person = personDao.findPerson(id);
model.addAttribute("person", person);
return "updatePerson";
}
Before it was:
#RequestMapping(value = { "/updatePerson/{id}" }, method = RequestMethod.GET)
public String showUpdatePersonPage(#PathVariable("id") int id, Person person, Model model) {
person = personDao.findPerson(id);
model.addAttribute("personToModify", person);
return "updatePerson";
}
And in my html the code was:
<form th:action="#{/updatePerson/{id}(id=${person.id})}"
th:object="${person}" method="POST">
First Name:
<input type="text" th:field="*{firstName}"/>
<br/>
Last Name:
<input type="text" th:field="*{lastName}" />
<br/>
Date of Birth (DD/MM/YYYY):
<input type="date" th:field="*{birthDate}" />
<br/>
ID:
<input type="text" th:field="*{id}" />
<br/>
<input type="submit" value="Update" />
</form>
So that was because the key name used "personToModify" couldn't be found in the html as the object name used wasn't properly named:
th:object="${person}"
I can't see your Person class or controller but, for example, keeping it clean, you can create PersonForm class which can look like (might need to change Date)
import java.util.Date;
public class PersonForm {
private String firstName;
private String lastName;
private Date birthDate;
public PersonForm() {
}
public PersonForm(Person person) {
this.firstName = person.getFirstName();
this.lastName = person.getLastName();
this.birthDate = person.getBirthDate();
}
As you can see, it has fields which needs to populated and you set them in constructor, you can also apply validation annotations here if needed.
In your controller you would need to retrieve Person and using it, create and add PersonForm as model attribute. i.e.
#GetMapping("/person/edit/{id}") // you might not use id, might be username
public String editPerson(#PathVariable Long id, Model model) {
Person person = personRepository.getOne(id); // or service
PersonForm personForm = new PersonForm(person);
model.addAttribute("personForm", personForm);
// other stuff
// return html
}
and then change th:object="${person}" to th:object="${personForm}"
Now all th:field="*{firstName}" and others should be populated.
I have a problem prefilling a dropdown list in an grails webflow
I have a controller for the webflow
class ClearanceRequestController {
def index() {
redirect(action: "start")
}
def startFlow = {
contact {
on('next') {
flow.developer = params.developer
flow.project = params.project
flow.projectResponsible = params.projectResponsible
flow.email = params.email
[flow : flow]
}.to('application')
on('cancel').to('finish')
...
and the view looks like this:
contact.gsp
<g:if test="${message}">
<div class="message">${message}</div>
</g:if>
<g:form action="start" method="post">
<div class="dialog">
<table>
<tbody>
<tr class="prop">
<td valign="top" class="name">
<label for="projectName">Projekt:</label>
</td>
<td valign="top">
<input type="text" id="projectName" name="project" value="${params.project}" />
</td>
</tr>
<g:select name="state" from="${Project?.DIVISION_OPTIONS}" value="${Project?.DIVISION_OPTIONS}"/>
This is the Project definition
class Project {
static DIVISION_OPTIONS = ["A", "B", "C", "D"]
String name
String division
String toString(){
"$name"
}
static constraints = {
name(unique: true)
division(inList: DIVISION_OPTIONS)
}
}
I don't know how to get the data from the constraints. I tried to access
Project.constraints.division.inList
or
Project.DIVISION_OPTIONS
but both didn't worked. I assume I have to initialize the Project somewhere and pass it to the contact.gsp, but I don't know how.
OK I got it, just import the Project in the page, like
<%# page import="com.companyName.Project" contentType="text/html;charset=UTF-8" %>
or like:
<g:select name="state" from="${com.companyName.Project?.DIVISION_OPTIONS}" value="${com.companyName.Project?.DIVISION_OPTIONS}"/>
I have a dropdownlist control and it's populated with a list of peoples names from a database. I want to enable a CheckBox control if the user selects a person in the list and disable the checkbox if they select BLANK (also an option in the list).
Here is a portion of my code...
<tr>
<td> <asp:Label ID="lblAssignedTo1" runat="server" Text="Assigned To:"></asp:Label></td>
<td><asp:DropDownList ID="ddlAssignedTo1" runat="server" AppendDataBoundItems="True" DataSourceID="dsAssignedTo" DataTextField="StaffName" DataValueField="StaffID"><asp:ListItem Text="" /></asp:DropDownList></td>
</tr>
<tr>
<td> <asp:Label ID="LabelEmail1" runat="server" Text="Send Email:"></asp:Label>
</td>
<td><asp:CheckBox ID="cbEmail1" runat="server" Checked="true" /></td>
</tr>
The checkbox is a trigger to send an email to the person selected from the list. I want it to default the checkbox to "enabled" if a person is selected from the list to make sure the program I am using is going to send an email later on.
I had a look at http://api.jquery.com/change/ for an example of this, but it's not using a checkbox control, so not sure if it would work. Sorry I am new to jScript.
Thanks in advance
A pure HTML and JavaScript approach would look something like this:
<select id="people">
<option value="">Select One</option>
<option value="person1">Person 1</option>
<option value="person2">Person 2</option>
<option value="person3">Person 3</option>
</select>
<input type="checkbox" name="sendemail" id="sendemail" disabled="disabled" />
$(document).ready(function() {
$('#people').change(function() {
if($(this).val() == '') {
$('#sendemail').attr('disabled', 'disabled');
}
else {
$('#sendemail').removeAttr('disabled');
}
});
});
http://jsfiddle.net/AEXpG/
In terms of your code, just grab the select list and checkbox ClientId and then apply the above jQuery code to them.
It takes certain height for column or say row when we use which we are not able to remove
pls find code for more info
<td><s:form id="formAutocomplete" action="gridVisualisation"
theme="simple" target="grid123">
<table>
<tr>
<td><s:select id="selectedProfile" name="selectedProfile"
list="profileList" theme="simple"></s:select></td>
<td><sj:autocompleter id="selectedKeyword"
name="selectedKeyword" list="%{keywords}" loadMinimumCount="2"
label="Search" /> <s:hidden id="hiddenField" value=""
name="selectedProfile"></s:hidden> <s:hidden id="StartValueX"
value="" name="StartValueX"></s:hidden> <s:hidden id="EndValueX"
value="" name="EndValueX"></s:hidden> <s:hidden id="DurationType"
value="" name="DurationType"></s:hidden></td>
<td><sj:submit targets="grid123" value="AJAX Submit"
timeout="2500" parentTheme="simple" indicator="indicator"
onBeforeTopics="before" onCompleteTopics="complete"
onErrorTopics="errorState" effect="highlight"
effectOptions="{ color : '#222222' }" effectDuration="3000"
onclick="javascript:setXYGraphVal();" /></td>
</tr>
</table>
</s:form></td>
Below is a working example of a form. I need to display additional text field if user selects "Other" in drop down menu.
Unfortunately, I can't use example below because it requires Mootools but I use Jquery. Don't want to force users to download one more file (Mootools) just for one form.
Is there any way how to do this without Mootools? Thanks.
<form action='user_friends_manage.php' method='POST'>
<table cellpadding='0' cellspacing='0'>
<select name='friend_type' onChange="if(this.options[this.selectedIndex].value == 'other_friendtype') { $('other').style.display = 'block'; } else { $('other').style.display = 'none'; }">
<option></option>
<option value='1'>Friend</option>
<option value='2'>Family</option>
<option value='other_friendtype'>Other</option></select>
</td>
<td class='form2' style='display: none;' id='other'> <input type='text' class='text' name='friend_type_other' maxlength='50' /></td>
</tr></table></form>
try this:
*if(this.value=='other_friendtype') {document.getElementById('other').style.display='block'}*
in onchage event of select control.