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.
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!
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
This question already has answers here:
How can I retain HTML form field values in JSP after submitting form to Servlet?
(2 answers)
Closed 7 years ago.
Here is my code, how can i retain the values of the form when i click on the hyper reference link.(a href: bottom of the code)
<form action="APPServlet">
<div class="">
<div class="">Search For:</div>
<div class="">
<input type="text" size="45" align="right" name="searchRequest">
</div>
</div>
<div class="">
<div class="">Exclude:</div>
<div class="">
<input type="text" size="45" align="right" name="excludeWords">
</div>
</div>
<div class="">
<div class="">In Modules:</div>
<div class="">
<select name="modules">
<option name="module" value="all">All modules</option>
<c:forEach var="module" items="${modelObj.modules}">
<option name="module" value="${module}">${module}</option>
</c:forEach>
</select>
</div>
</div>
</form>
<!-- ahref outside the form , this does not work
&searchRequest=${searchRequest} <- Guess the value is out of scope
-->
<div class="div-table-row">
<div class="div-table-single-col">
${question.id} ${question.topic}
</div>
</div>
You have several possibilities, and all involve JavaScript.
When clicking on the link, change its href using JavaScript by appending all the values of the inputs of the form as parameters of the URL
When clicking on the link, add a hidden field to the form containing the question ID, change the action of the form to make it go to MCQApp instead of going to APPServlet, and submit the form
The cleanest one: when clicking on the link, send an AJAX request to a URL which responds with an HTML fragment (or data), and replace the section of the page that you want to update with this HTML fragment, thus leaving the form as it is in the page.
There are two ways, if you're working with a session, store it as an attribute of your session. But if you're not using sessions, you can use Cookies, just store the values you want in a new cookie and then call the cookie and obtain the values.
Sessions are cookies as well, but they have another functions, the cookies are simplier and help you to store values that you can reuse later. Best regards
Keep the data passed in a model and use it in the jsp like,
Keep all your Input variables in search model object and update it whenever search is called.Keep searchRequest in the request attribute before rendering the response.
The problem I have is best explained with a code example:
I have the following VIEW.jsp:
<c:forEach var="widget" items="${widgets}">
<div class="drag">
<p>Id: ${widget.id}</p>
<input class="editWidget" type="image" src="/tis/img/icons/edit.png" alt="Edit widget">
<input class="idWidget" type="hidden" value="${widget.id}">
</div>
</c:forEach>
<div id="editDialog" title="Edit widget">
<fieldset>
<input class="editWidgetId" type="hidden" value="??" id="editWidgetId">
</fieldset>
</div>
editWidgetId should have its 'value' attribute filled with the value of idWidget inside the foreach loop. This value should be different for each element in the loop (element is selected by edit button).
The questions:
How can I get the value of one input field to another input field?
How can I do this when a foreach loop is present?
Thanks in advance
Given you want dynamic behavior, this work has to be executed on the client-side by JavaScript as at the server-side, you have many widgets to one editDialog and are lacking the client-side user event to make your decision.
What you want to do is assign a function handler (or statement in my example below) to each editWidget to change the value of the editWidgetId input box with the appropriate value:
<input onclick="document.getElementById('editWidgetId').value = '${widget.id}'" class="editWidget" type="image" src="/tis/img/icons/edit.png" alt="Edit widget" >
Haven't tested this but I hope you get the idea
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