Thymeleaf form array with default values - spring

I'm using Spring+Thymeleaf to see and modify the users in a database. I would like to set the input fields to the actual values of an original user but I've tried with different styles and it doesn't work.
With the present configuration I can update information of users and see the id of original user (it's not in a input field) but I can't show the actual configuration in input field as default.
CONTROLLER:
#GetMapping(value = {"/", ""})
public String subusersPage(HttpSession session, Model model) {
String idUser = BaseController.getLoggedUser(session);
UserDTO userDTO = userService.getUserById(idUser);
model.addAttribute("subusersDTO", userService.getSubusersDTO(userDTO.getSubusers()));
model.addAttribute("populations", userDTO.getPopulations());
model.addAttribute("configurations", userDTO.getConfigurations());
model.addAttribute("attributes", userDTO.getAttributes());
model.addAttribute("subuserDTO", new SubuserDTO());
return "subusers";
}
HTML:
<th:block th:each="subuserDTO_original : ${subusersDTO}">
<hr>
<form action="#" th:action="#{/subusers/__${subuserDTO_original.id}__}" th:object="${subuserDTO}" method="post">
<div>
<p th:text="${'Id: ' + subuserDTO_original.id}"></p>
<p>Name: <input type="text" th:field="*{name}" th:name="name" th:value="${subuserDTO_original.name}"/></p>
<p>Population: <input type="text" th:field="*{population}" th:name="population" th:value="${subuserDTO_original.population}"/></p>
<p>Configuration: <input type="text" th:field="*{configuration}" th:name="configuration" th:value="${subuserDTO_original.configuration}"/></p>
<p>Attributes: <input type="text" th:field="*{attributes}" th:name="attributes" th:value="${subuserDTO_original.attributes}"/></p>
<p>
<button type="submit" th:name="action" th:value="update">Update</button>
<button type="submit" th:name="action" th:value="delete">Delete</button>
<button type="reset" th:name="action" th:value="clear">Clear</button>
</p>
</div>
</form>
<form action="#" th:action="#{/subusers/__${subuserDTO_original.id}__}" method="get">
<button type="submit">Default</button>
</form>
</th:block>
Any help will be very appreciated, thank you!

If you want to edit an existing user, then your th:object (which is ${subuserDTO} in this case) needs to be populated with the values of the original user. This is because when you use the attribute th:field="*{name}", it actually overwrites the name, id, and value of the html tag (which is why th:value="${subuserDTO_original.name}" isn't working.
Two other options you could do:
You could also set name="name" and use th:value instead.
Or another option, you could use ${subuserDTO_original} as your th:object.

Related

Thymeleaf set default value [duplicate]

I am programming in Spring and using Thymeleaf as my view, and am trying to create a form where users can update their profile. I have a profile page which lists the user's information (first name, last name, address, etc), and there is a link which says "edit profile". When that link is clicked it takes them to a form where they can edit their profile. The form consists of text fields that they can input, just like your standard registration form.
Everything works fine, but my question is, when that link is clicked, how do I add the user's information to the input fields so that it is already present, and that they only modify what they want to change instead of having to re-enter all the fields.
This should behave just like a standard "edit profile" page.
Here is a segment of my edit_profile.html page:
First Name:
Here is the view controller method that returns edit_profile.html page:
#RequestMapping(value = "/edit", method = RequestMethod.GET)
public String getEditProfilePage(Model model) {
model.addAttribute("currentUser", currentUser);
System.out.println("current user firstname: " + currentUser.getFirstname());
model.addAttribute("user", new User());
return "edit_profile";
}
currentUser.getFirstname() prints out the expected value, but I'm getting blank input values in the form.
Thanks.
Solved the problem by removing th:field altogether and instead using th:value to store the default value, and html name and id for the model's field. So name and id is acting like th:field.
I'm slightly confused, you're adding currentUser and a new'd user object to the model map.
But, if currentUser is the target object, you'd just do:
<input type="text" name="firstname" value="James" th:value="${currentUser.firstname}" />
From the documentation:
http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html
I did not have a form with input elements but only a button that should call a specific Spring Controller method and submit an ID of an animal in a list (so I had a list of anmials already showing on my page). I struggled some time to figure out how to submit this id in the form. Here is my solution:
So I started having a form with just one input field (that I would change to a hidden field in the end). In this case of course the id would be empty after submitting the form.
<form action="#" th:action="#{/greeting}" th:object="${animal}" method="post">
<p>Id: <input type="text" th:field="*{id}" /></p>
<p><input type="submit" value="Submit" /> </p>
</form>
The following did not throw an error but neither did it submit the animalIAlreadyShownOnPage's ID.
<form action="#" th:action="#{/greeting}" th:object="${animal}" method="post">
<p>Id: <input type="text" th:value="${animalIAlreadyShownOnPage.id}" /></p>
<p><input type="submit" value="Submit" /> </p>
</form>
In another post user's recommended the "th:attr" attribute, but it didn't work either.
This finally worked - I simply added the name element ("id" is a String attribute in the Animal POJO).
<form action="#" th:action="#{/greeting}" th:object="${animal}" method="post">
<p>Id: <input type="text" th:value="${animalIAlreadyShownOnPage.id}" name="id" /></p>
<p><input type="submit" value="Submit" /> </p>
</form>

Thymeleaf th:object does not work with controller?

I am new to Thymeleaf. I am trying to create a search form but it doesn't work. But when I tried manually entering localhost:8080/searchMovies/name and it works fine, so whats wrong with my code?
MovieController.java
#GetMapping("/searchMovies/{name}")
public ModelAndView searchMoviesByNameLike(#PathVariable("name") String name) {
List<Movie> searchMovies = movieService.findMovieByNameContaining(name);
ModelAndView modelAndView = new ModelAndView("searchMovies");
modelAndView.addObject("searchMovies", searchMovies);
modelAndView.addObject("searchMoviesList", movieService.findMovieByNameContaining(name));
return modelAndView;
}
header.html
<form th:object="${searchMovies}" th:action="#{/searchMovies}" method="get" class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="" aria-label="Search" th:value="${name}">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
th:object (generally) isn't used for get requests. You use th:object when you're submitting (w/POST) a form, and you want Spring to populate the properties of a Java object with the fields on that form.
Since Thymeleaf is a server side processed language, and normal html doesn't support building/forwarding to the kind of url you want you're going to have to use JavaScript to accomplish what you want.
For example, a normal GET request when submitted through a form looks like this:
/searchMovies?property1=value1&property2=value2
if you want your url to look like this:
/searchMovies/value1
then you need to use JavaScript to build that url when the user clicks the button and forward to that url.
you need a name at the end of url but in you didn't set it. in this case you can't set it. you must do it by a different approach. another thing is that you need an object in your form not a list. try the following code :
#GetMapping("/searchMovies")
public String sendSearchForm(Model model) {
model.addAttribute("movie", new Movie());
return "search";
}
<form th:object="${movie}" th:action="#{/searchMovies}" method="post" class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="" aria-label="Search" th:field="*{name}">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
#PostMapping("/searchMovie")
public String searchAccounts(#ModelAttribute Movie movie) {
List<Movie> searchMovies = movieService.findMovieByNameContaining(movie.getName());
.
.
.
return modelAndView;

i want to send data from one view to another Laravel view

i have two views, view-1 and view-2.
view-1 has form, which will store data temporary.
i want to get data from view-1 and send it to view-2, which has user profile, where temporary data from view-1 will be shown.
how we can achieve it in Laravel, i know we can store data in SQL
and then fetch it, but how to do it without storing to SQL.
my code:
view: 1
<form >
<div class="form-group">
<label class="col-form-label" >Date</label>
<input type="text" name="sdate" class="form-control">
<input type="submit" class="btn btn-primary" value="Add date" >
</div>
</form>
view 2 Controller:
public function report2($id)
{
$teacher = Teacher::teacher($id);
return View('teachers.report2' ,compact('teacher','today','sdate'));
}
Route:
Route::get('teachers/{id}/report2', 'TeachersController#report2');
Use session, for example in view1 you pass variable of date do this on your controller of view 1
session(['sdate' => $request->sdate]);
and then you can get the value of the session in your controller or view by calling this
$date = session('sdate');
further reading see the docs
i was able to do it using simple php;
in view 1 i added this code:
<form action="report2" method="get">
Date: <input type="text" name="today" placeholder="Date of Birth" class="datepicker form-control"><br>
<input type="submit">
</form>
Laravel view 2:
<?php echo $_GET["today"]; ?><br>

Parsing data from blade form to controller using request

I want to parsing my label name="predictDataTemp" in form into my controller, I already set the value form my label, but when I want to request the data still null
content.blade.php
<div class="form-group" align="center">
<label for="exampleResult" name="result">Result</label>
<label for="examplePredict" id="predictData" class="form-control">
<input type="hidden" name="predictDataTemp">
</label>
</div>
controller
public function result(Request $request){
$this->validate($request,[
'mCalories'=>'required',
'mCholesterol'=>'required',
'mFat'=>'required',
'mProtein'=>'required',
'mSugars'=>'required'
]);
$item= array();
array_push($item,array('Calories'=>$request->mCalories,'Cholesterol'=>$request->mCholesterol,'Fat'=>$request->mFat,'Protein'=>$request->mProtein,'Sugars'=>$request->mSugars,'Predict'=>$request->predictDataTemp));
return json_encode($item);
}
Your input has no value.
If you want to give it a value with jQuery (looking at your previous comments)
Give the input an id
<input type="hidden" name="predictDataTemp" id="predictDataTemp">
Then assign it in jQuery
$('#predictDataTemp').val('pass value here');
label don't have name attribute, it has only two attribute for and form so you can pass value in hidden input tag, Read this article
Instead
<label type="text" for="examplePredict" id="predictData" name="predictDataTemp" class="form-control"></label>
Use this
<label type="text" for="examplePredict" class="form-control"></label>
<input type="hidden" name="predictDataTemp" id="predictData" value="something">

Controller Not receiving value from span in HTML using Spring boot and Thymeleaf

I have the following content in my HTML which is using Thymeleaf
<form action="#" th:action="#{/shutDown}" th:object="${ddata}" method="post">
<span>Domain</span>
<span th:text="${domain}" th:field="*{domain}">domain</span>
<input type="Submit" value="close" />
</form>
And I have the following in my Controller which is using Sprint Boot
#RequestMapping(value = "/shutDown", method = RequestMethod.POST)
public ModelAndView shutDownPage(ModelAndView modelAndView, Authentication authentication,
#ModelAttribute("ddata") DInputBean dInputBean) {
String domain = dInputBean.getdomain();
return modelAndView;
}
I'm hoping I'd get value of domain from the HTML in the Controller but it's always null. DInputBean has getters and setters for "domain" field.
The th:field attribute can be used on <input>, <select>, or, <textarea>.
A solution you could possibly replacing you second <span> with a hidden input element.
<form action="#" th:action="#{/shutDown}" th:object="${ddata}" method="post">
<span>Domain</span>
<input type="hidden" th:field="*{domain}" th:value="${domain}" />
<input type="Submit" value="close" />
</form>
If you wanted to keep the second div, just place the <input type="hidden"> inside the second <span> and remove the th:field attribute from the second <span>.
Edit:
If you wanted to add the value of domain in a span.
<form action="#" th:action="#{/shutDown}" th:object="${ddata}" method="post">
<span>Domain</span>
<span th:text="${domain}">domain<span>
<input type="hidden" th:field="*{domain}" th:value="${domain}" />
<input type="Submit" value="close" />
</form>
http://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html#inputs
An option is to use a read-only input field:
<input type="text" th:field="*{domain}" th:value="${domain}" readonly="readonly"/>
This both displays the value and sends it on submit.
The key is to add the value of the domain variable to the form:
#GetMapping("/shutDownPage")
public String shutDownPage(Model model) {
model.addAttribute("ddata" new Ddata()); //or however you create your bean
String username = ... //however you get your username
String domain = myRepositoryService.findDomainByUsername(username);
model.addAttribute("domain", domain);
return "shutDownPage";
}
Include an HTML page in the action so that when you open the HTML page in a browser without a server/container, the button will still appear to work:
<form action="confirmationPage.html" th:action="#{/shutDown}" th:object="${ddata}" method="post">
<!-- You can benefit from using a conditional expression -->
<span th:text="${domain != null ? domain : 'No domain supplied'}">[domain]</span>
<input type="hidden" th:field="*{domain}" th:value="${domain}"/>
<input type="Submit" value="close"/>
</form>
And your post method:
#PostMapping("/shutDown") //use shorthand
public String shutDownPagePost(#ModelAttribute("ddata") DInputBean dInputBean {
String domain = dInputBean.getDomain();
//do whatever with it
return "confirmationPage";
}

Resources