Modal not opening when I click on button-CodePudding

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})}"  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  id="editModal">
<form th:action="@{/courses/editCourse}" method="POST">
 <div  role="dialog">
    <div >
        <div  style="background-color:#383434">

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

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

CodePudding user response：

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})}"  onclick="openModal()">
    <img src="https://i.ibb.co/YcxKhdh/pencil-removebg-preview.png" width="20" />
</a>

CodePudding user response：

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})}"  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 .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  id="editModal" role="dialog">
    <div >
        <div  style="background-color:#383434">

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

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