单击按钮时模态不打开

Question

I am trying to display data in the Modal when I click the button. This is the HTML code I wrote everything is looking fine but it won't open the Modal when I click the button. If I put an alert inside the script it popup when I click the button but anything else like the modal is not working. What I am doing wrong?

    <tr th:each="course : ${courses}">
                <td th:text="${course.courseid}"></td>
                <td th:text="${course.name}"></td>
                <td th:text="${course.year}"></td>
                <td th:text="${course.syllabus}"></td>
                <td th:text="${course.semester}"></td>
                <td th:text="${course.attendance}"></td>
                <td>
                    <a th:href="@{/courses/getOne/(courseid=${course.courseid})}" class="btn btn-sm btn-success" onclick="openModal()" ><img src="https://i.ibb.co/YcxKhdh/pencil-removebg-preview.png" width="20" /></a>
                    <script>
                        function openModal() {
                            $(document).ready(function(){
                                    
                                event.preventDefault();
                                var href = $(this).attr("href");
                                
                                $.get(href, function(course, status){
                                    $(".editForm .courseid").val(course.courseid);
                                    $(".editForm .name").val(course.name);
                                    $(".editForm .year").val(course.year);
                                    $(".editForm .syllabus").val(course.syllabus);
                                    $(".editForm .semester").val(course.semester);
                                    $(".editForm .attendance").val(course.attendance);
                                });
                                
                                $("#editModal").modal('show');
                                
                            });
                                
                        }
                    </script>

<div class="editFrom" id="editModal">
<form th:action="@{/courses/editCourse}" method="POST">
 <div class="modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content" style="background-color:#383434">

      <!-- Modal Header -->
              <div class="modal-header">
                <h4 class="modal-title" id="editModal">Update Course</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
              </div>
        
              <!-- Modal body -->
              <div class="modal-body" style="background-color:#383434">
                
                    <label for="courseidEdit" class="col-form-label">ID</label>
                    <input style="background-color:#CDCDCD" type="text" class="form-control" id="courseidEdit" name="courseidEdit" value="" />
                
                    <label for="nameEdit" class="col-form-label">Name</label>
                    <input style="background-color:#CDCDCD" type="text" class="form-control" id="nameEdit" name="nameEdit" value="" />      
                
                    <label for="yearEdit" class="col-form-label">Year</label>
                    <input style="background-color:#CDCDCD" type="text" class="form-control" id="yearEdit" name="yearEdit" value="" />
              
                    <label for="syllabusEdit" class="col-form-label">Syllabus</label>
                    <input style="background-color:#CDCDCD" type="text" class="form-control" id="syllabusEdit" name="syllabusEdit" value="" />

                    <label for="semesterEdit" class="col-form-label">Semester</label>
                    <input style="background-color:#CDCDCD" type="text" class="form-control" id="semesterEdit" name="semesterEdit" value="" />
            
                    <label for="attendanceEdit" class="col-form-label">Attendance</label>
                    <input style="background-color:#CDCDCD" type="text" class="form-control" id="attendanceEdit" name="attendanceEdit" value="" />
              </div>
                
        
              <!-- Modal footer -->
              <div class="modal-footer">
                 <button type="submit" class="btn btn-success">Update</button>
                 <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
              </div>
    
        </div>
        </div>
 </div>
</form>

Answer 1

Hopefully this work.

 <tr th:each="course : ${courses}">
                <td th:text="${course.courseid}"></td>
                <td th:text="${course.name}"></td>
                <td th:text="${course.year}"></td>
                <td th:text="${course.syllabus}"></td>
                <td th:text="${course.semester}"></td>
                <td th:text="${course.attendance}"></td>
                <td>
                    <a th:href="@{/courses/getOne/(courseid=${course.courseid})}" class="btn btn-sm btn-success" onclick="openModal()" ><img src="https://i.ibb.co/YcxKhdh/pencil-removebg-preview.png" width="20" /></a>
                    <script>
                        function openModal() {
                                    
                                event.preventDefault();
                                var href = $(this).attr("href");
                                
                                $.get(href, function(course, status){
                                    $(".editForm #courseidEdit").val(course.courseid);
                                    $(".editForm #nameEdit").val(course.name);
                                    $(".editForm #yearEdit").val(course.year);
                                    $(".editForm #syllabusEdit").val(course.syllabus);
                                    $(".editForm #semesterEdit").val(course.semester);
                                    $(".editForm #attendanceEdit").val(course.attendance);
                                });
                                
                                $("#editModal").modal('show');
                                
                        }
                    </script>

<div class="modal" id="editModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content" style="background-color:#383434">

      <!-- Modal Header -->
              <div class="modal-header">
                <h4 class="modal-title" id="editModal">Update Course</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
              </div>
        
              <!-- Modal body -->
              <div class="modal-body" style="background-color:#383434">
                <form class="editForm" th:action="@{/courses/editCourse}" method="POST">
                    <label for="courseidEdit" class="col-form-label">ID</label>
                    <input style="background-color:#CDCDCD" type="text" class="form-control" id="courseidEdit" name="courseidEdit" value="" />
                
                    <label for="nameEdit" class="col-form-label">Name</label>
                    <input style="background-color:#CDCDCD" type="text" class="form-control" id="nameEdit" name="nameEdit" value="" />      
                
                    <label for="yearEdit" class="col-form-label">Year</label>
                    <input style="background-color:#CDCDCD" type="text" class="form-control" id="yearEdit" name="yearEdit" value="" />
              
                    <label for="syllabusEdit" class="col-form-label">Syllabus</label>
                    <input style="background-color:#CDCDCD" type="text" class="form-control" id="syllabusEdit" name="syllabusEdit" value="" />

                    <label for="semesterEdit" class="col-form-label">Semester</label>
                    <input style="background-color:#CDCDCD" type="text" class="form-control" id="semesterEdit" name="semesterEdit" value="" />
            
                    <label for="attendanceEdit" class="col-form-label">Attendance</label>
                    <input style="background-color:#CDCDCD" type="text" class="form-control" id="attendanceEdit" name="attendanceEdit" value="" />
                </form>                    
              </div>
                
        
              <!-- Modal footer -->
              <div class="modal-footer">
                 <button type="submit" class="btn btn-success">Update</button>
                 <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
              </div>
    
        </div>
        </div>
 </div>

Update: Adding here, the comments I added on the question.

1. you don't need document.ready event, because you are opening modal by clicking on the button that means your dom is already ready.
2. Modal and Form are not in correct hierarchy, Form should be inside Modal, and you should call method .modal('show') on modal instance not on form.
3. As in comment your data is not reflected in controls, the reason could be $(".editForm.courseid"), $(".editForm.name") etc. are not present in the html. (Updating the answer with correct selectors ).

Answer 2

Add data-bs-toggle & data-bs-target , works for bootstrap

<a data-bs-toggle="modal" data-bs-target="#editModal" th:href="@{/courses/getOne/(courseid=${course.courseid})}" class="btn btn-sm btn-success" onclick="openModal()">
    <img src="https://i.ibb.co/YcxKhdh/pencil-removebg-preview.png" width="20" />
</a>