0

Cannot delete entity from list in my Html+Thymeleaf page?

When i run my application i add few entity in my list, but when i click on bottom delete, nothing does not change, entity remain on the list.

My html + thymeleaf page.

  <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <div class="container">

        <form class="form-inline" method="POST" th:action="@{/}" th:object="${student}">
        <label class="sr-only" for="firstname">First Name</label>
       <input type="text" class="form-control mb-2 mr-sm-2" name="firstname" placeholder="Enter First Name" required>
    
        <label class="sr-only" for="lastname">Last Name</label>
        <input type="text" class="form-control mb-2 mr-sm-2" name="lastname" placeholder="Enter Last Name" required>
    
        <label class="sr-only" for="emailAddress">Email </label>
        <input type="text" class="form-control mb-2 mr-sm-2" name="emailAddress" placeholder="Enter Email Address" required>

        <button type="submit" class="btn btn-color mb-2">Submit</button>
        </form>
        
        <table class="students">
            <tr>
                <th>Grade Book</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
    
            <tr th:each="student, iterator : ${students}" >
            <td th:text="${iterator.index + 1}" th:onclick="|studentInfo('${student.id}');|"></td>
            <td th:text="${student.firstname}" th:onclick="|studentInfo('${student.id}');|"></td>
            <td th:text="${student.lastname}" th:onclick="|studentInfo('${student.id}');|"></td>
            <td > <span  th:text="${student.emailAddress}" th:onclick="|studentInfo('${student.id}');|"></span>
            <span>
 **<!--BOTTOM DELETE -->**
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle-fill float-right pointer" style="color: #d3d3d3" viewBox="0 0 16 16" th:onclick="|deleteStudent('${student.id}');|">
            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
            </svg>
            </span>
            </td>
            </tr>
        </table>
    </div>

My controller class

 @Autowired
        private StudentAndGradeService studentService;
    
    @GetMapping ("/delete/student/{id}")
    public String deleteStudent (@PathVariable int id, Model model) {
        
        if (!studentService.checkIfStudentIsNull(id)) {
        return "error";
        }       
        studentService.deleteStudent(id);
        Iterable <CollegeStudent2> collegeStudent = studentService.getGradebook();
        model.addAttribute("students",collegeStudent);
        return "index";
    }

Service

public void deleteStudent (int id) {
        if (checkIfStudentIsNull(id)) {
            studentDao.deleteById(id);
        }
        
      }

I think something wrong with svg bottom delete, in test method delete work good. If something know where my problem, please say, tnx!

Jcoder
  • 27
  • 5

1 Answers1

0

When you click on the SVG, you are actually clicking on the <path>, so your <svg> event is not fired.

There are different techniques you can use to handle this - see Add onclick event to SVG element

Since you are already using Thymeleaf, however, I suggest the following:

  1. Remove the th:onclick attribute from the <svg> element (since we know it is not firing).

  2. Add an ID to your path: <path id="mypath".... It can be whatever ID you want, as long as it is unique. Or if you have multiple such SVGs you can add a class instead <path class="mypath".... I will use an ID, here.

  3. Add the following script to your page:

<script th:inline="javascript">
    (function() {
        document.getElementById('mypath').addEventListener("click", handlePathClick);

        function handlePathClick() {
            let studentId = [[${student.id}]];
            alert( studentId ); // just for my testing
            //deleteStudent( studentId ); // use this in your code
        }
    })();
</script>

This script supports Thymeleaf - it uses th:inline="javascript" and [[${student.id}]]. It adds an event handler to the <path> element.

In my case, it just fires an alert, for testing purposes.

If you use a class instead of an ID, you need to use getElementsByClassName (note the plural "...Elements..." here).

Update

Regarding the comment:

i have exception in IDEA

I am not using IDEA and do not get that exception - but you can make the following change to ensure your IDE sees valid JavaScript:

Change this line:

let studentId = [[${student.id}]];

to this:

let studentId = /*[[${student.id}]]*/ 0;

This wraps the Thymeleaf expression in a comment. Thymeleaf will still process the expression correctly, and remove the comments - and also the hard-coded 0.

This is described in the official documentation: JavaScript natural templates.

andrewJames
  • 19,570
  • 8
  • 19
  • 51