How can I populate value at form inside modal using Bootstrap and thymeleaf?

javascript java html spring-boot thymeleaf

11,744

Spending 1 hour at StackOverflow, at last, I found the solution. I have changed a little in my HTML code

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Edit </button>

 <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" th:attrappend="data-target=${student.id}">Edit </button>

and <div class="modal fade" id="myModal" role="dialog"> to

<div class="modal fade" id="myModal" role="dialog" th:attrappend="id=${student.id}">

Now everything working fine!

11,744

Avijit Barua

Optimistic and Imperturbable!!

Updated on June 04, 2022

Comments

Avijit Barua almost 2 years

In my spring boot project I have a html page which contain list of students. In that page i have two option Edit and Delete for each student. I want to show value in modal for each student information when i click on Edit. But I am unable to do that. Another weird thing is every time I click on any Edit, the form populate only first member of list. Perhaps I will have to add some JavaScript code or something else. Here the screenshot of studentlist page ![enter image description here ]1

My html file is

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:sf="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title>Student List</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<script th:if="${existRoll != null}">
    $(function () {
        $('#myModal').modal('show');
    });
</script>

<body>
<div class="container">

        <h1 style="text-align:center;">Students List</h1>
        <table class="table table-striped">
            <tr>
                <th>Id</th>
                <th>Roll</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Age</th>
                <th>Setting</th>
            </tr>

            <tr th:each="student : ${studentList}">
                <td th:text="${student.id}"></td>
                <td th:text="${student.roll}"></td>
                <td th:text="${student.firstName}"></td>
                <td th:text="${student.lastName}"></td>
                <td th:text="${student.age}"></td>
                <td>
                    <button type="button"
                            class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Edit
                    </button>

                    <div class="modal fade" id="myModal" role="dialog">
                        <div class="modal-dialog">

                            <!-- Modal content-->
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>

                                </div>
                                <div class="modal-body">


                                    <!--Form code start from here  -->


                                    <!-- Form Name -->
                                    <legend>Registration Form</legend>

                                    <form class="form-horizontal" action="#" th:action="@{/doRegistration}"
                                          method="post">
                                        <fieldset>

                                            <div class="form-group">
                                                <label class="col-md-4 control-label" for="roll">Roll</label>
                                                <div class="col-md-4">

                                                    <input id="id" path="id" name="id" type="hidden"
                                                           placeholder="id" class="form-control input-md"
                                                           th:value="${student.id}"/>

                                                    <input id="roll" path="roll" name="roll" type="text"
                                                           placeholder="Roll" class="form-control input-md"
                                                           th:value="${student.roll}"/>

                                                    <span th:if="${existRoll !=null}" style="color:Red;"> Already Exist !</span>
                                                </div>
                                            </div>


                                            <!-- Text input-->
                                            <div class="form-group">
                                                <label class="col-md-4 control-label" for="firstName">First Name</label>
                                                <div class="col-md-4">
                                                    <input id="firstName" path="firstName" name="firstName"
                                                           type="text" placeholder="firstName"
                                                           class="form-control input-md" th:value="${student.firstName}"
                                                    />
                                                </div>
                                            </div>


                                            <!-- Text input-->
                                            <div class="form-group">
                                                <label class="col-md-4 control-label" for="lastName">Last Name
                                                </label>
                                                <div class="col-md-4">
                                                    <input id="lastName" path="lastName" name="lastName"
                                                           type="text" placeholder="lastName"
                                                           class="form-control input-md"
                                                           th:value="${student.lastName}"/>
                                                </div>
                                            </div>


                                            <!-- Text input-->
                                            <div class="form-group">
                                                <label class="col-md-4 control-label" for="age">Age
                                                </label>
                                                <div class="col-md-4">
                                                    <input id="age" path="age" name="age"
                                                           type="text" placeholder="age" class="form-control input-md"
                                                           th:value="${student.age}"/>
                                                </div>
                                            </div>


                                            <!-- Text input-->
                                            <div class="form-group">
                                                <label class="col-md-4 control-label" for="pass">Password</label>
                                                <div class="col-md-4">
                                                    <input id="pass" path="pass" name="pass"
                                                           type="password" placeholder="password"
                                                           class="form-control input-md"
                                                           th:value="${student.pass}"/>
                                                </div>
                                            </div>

                                            <!-- Button -->
                                            <div class="form-group">
                                                <label class="col-md-4 control-label" for="register"></label>
                                                <div class="col-md-4">
                                                    <button id="register" name="register" class="btn btn-primary">
                                                        Register
                                                    </button>
                                                </div>
                                            </div>

                                        </fieldset>
                                    </form>

                                </div>

                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                </div>


                            </div>

                        </div>
                    </div>


                    <a th:href="@{/deleteStudent/(id=${student.id})}"
                       onclick="return confirm('Are you sure you want to delete this item?');">Delete</a>
                </td>
            </tr>

        </table>
    </div>

</body>
</html>

And my entire Controller class is

package org.avijit.Controller;


import org.avijit.Entity.Student;
import org.avijit.Service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.*;

import javax.validation.Valid;
import java.util.List;


@Controller
public class StudentController {

    @Autowired
    StudentService studentService;

    @RequestMapping(value = "/logForm", method = RequestMethod.GET)
    public String gotoHome() {
        return "Login";
    }

    @RequestMapping(value = "/loginCheck", method = RequestMethod.POST)
    public String checkLogin(@RequestParam String roll, @RequestParam String pass, Model model) {
        if (studentService.existsByRollAndPass(roll, pass)) {
            return "Welcome";
        } else {
            model.addAttribute("logError", "logError");
            return "Login";
        }
    }


    @RequestMapping(value = "/registration")
    public String registration(Model model) {
        model.addAttribute(new Student());
        return "Registration";
    }

    @RequestMapping(value = "/getStudents")
    public String getStudents(Model model) {
        List<Student> studentList = studentService.getStudents();
        model.addAttribute(studentList);
        return "StudentList";
    }

    @RequestMapping(value = "/deleteStudent", method = RequestMethod.GET)
    public String deleteStudent(@RequestParam(name = "id") int id) {
        studentService.deleteStudent(id);
        return "redirect:/getStudents";
    }

    @RequestMapping(value = "/editStudent/{id}", method = RequestMethod.GET)
    public String editStudent(@PathVariable("id") int id, Model model) {
        Student student = studentService.getStudent(id);
        model.addAttribute("student", student);
        return "StudentList";
    }



    @RequestMapping(value = "/demo")
    public String demoRegistration(Model model) {
        model.addAttribute(new Student());
        return "DemoRegistration";
    }

    @RequestMapping(value = "/doRegistration", method = RequestMethod.POST)
    public String doRegistration(@Valid @ModelAttribute("student") Student student, BindingResult result, Model model) {
        if (result.hasErrors()) {
            model.addAttribute("hasError", true);
            return "DemoRegistration";
        } else {
            if (student.getId() == null && !studentService.rollExist(student.getRoll())) {
                studentService.saveStudent(student);
                return "Welcome";
            } else if (student.getId() == null && studentService.rollExist(student.getRoll())) {
                model.addAttribute("existRoll", "existRoll");
                model.addAttribute("hasError", true);
                return "DemoRegistration";
            } else {
                Student student1 = studentService.getStudent(student.getId());
                if (student1.getId() != null && !student1.getRoll().equals(student.getRoll()) && studentService.rollExist(student.getRoll())) {
                    model.addAttribute("hasError", "hasError");
                    model.addAttribute("existRoll", "existRoll");
                    return "redirect:/getStudents";
                } else {
                    student1.setFirstName(student.getFirstName());
                    student1.setLastName(student.getLastName());
                    student1.setRoll(student.getRoll());
                    student1.setAge(student.getAge());
                    student1.setPass(student.getPass());
                    studentService.saveStudent(student1);
                    return "redirect:/getStudents";
                }
            }
        }
    }

}

Avijit Barua about 4 years

@user3365200 For editing I was using the same method for saving, which was /doRegistration. You can see I put condition in controller.
user3365200 almost 4 years

Thankyou . But is there anyway to populate particular row values in popup without calling controller methods since we already have data so when we click on edit at that particular index how do we set that data in popup with out calling controller . This is possible in jsp but i dontknow how to it in thymeleaf
Avijit Barua almost 4 years

@user3365200 If that approach is possible in JSP then it will also be done in thymeleaf. But I haven't done that way. But I can find that approach