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>
Advertisement
Answer
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.
- you don’t need document.ready event, because you are opening modal by clicking on the button that means your dom is already ready.
- 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. - 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).