How do I load an object in a Bootstrap modal using Spring Boot / Thymeleaf? - spring-boot

Question

I have a table filled with tasks:
<table class="table" id="tasksTable">
<thead class="thead-inverse">
<tr>
<th>ID</th>
<th>Title</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr data-th-each="task : ${tasks}">
<td data-th-text="${task.id}">Task ID</td>
<td data-th-text="${task.title}">Task Title</td>
<td><a th:href="#{/tasks/delete/{id}(id=${task.id})}"
class="btn btn-danger">Delete</a> -
<button class="btn btn-warning" data-toggle="modal"
data-th-id="${task.id}" data-target="#updateTaskModal">Update</button></td>
</tr>
</tbody>
</table>
The list is sent from a controller like this:
#GetMapping(path = "/")
public String getAllUsersView(Model model) {
List<User> users = new ArrayList<>();
List<Task> tasks = new ArrayList<>();
User user = new User();
Task task = new Task();
userRepository.findAll().forEach(users::add);
taskRepository.findAll().forEach(tasks::add);
model.addAttribute("users", users);
model.addAttribute("tasks", tasks);
model.addAttribute("user", user);
model.addAttribute("task", task);
return "view";
}
I would like to pick one task from the table, and send it to a modal. For instance, let's say I have 10 tasks. I want to pick task #5 and be able to update it. When I click Update, I can open a modal, but I don't know how to fill the form with the data from that specific task, it all comes blank.
This is my modal:
<div id="updateTaskModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Update Task</h4>
</div>
<div class="modal-body">
<form id="updateNewTask" action="#" th:action="#{/tasks/update}"
th:object="${task}" method="put">
<input type="text" class="form-control" name="title" id="title"
th:field="*{title}" placeholder="Task Title" />
<hr />
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success pull-right">Update</button>
</form>
</div>
</div>
</div>
</div>
What would be the best practice to achieve this? Is it possible to send the entire object thru a button? If not, how can I load my object into the modal? I can retrieve a JSON version of the object via /tasks/{taskId}, but I don't know how to call it from the modal.

Answer 1

You can load content into existing modal with Javascript. "Best" way to to this is by rendering your object on server into some HTML with thymleaf and then fetching this response via Ajax and injecting into your modal box into some div tag.