Issue
I am working with Spring, Thymeleaf and Bootstrap and want to be able to display, edit and delete my University courses. For editing a course, I need to call a JavaScript function I have defined in courses.js. Currently I am just trying to log the course selected to the console in order to see if everything works properly. But when clicking on the edit button, I am getting: "Uncaught ReferenceError: editCourse is not defined at HTMLButtonElement.onclick", even though I defined the function editCourse in courses.js. Here is my Code:
HTML:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymleaf.org">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link th:href="@{/css/courses.css}" rel="stylesheet">
<script type="text/javascript" th:src="@{/js/courses.js}"></script>
<meta charset="UTF-8">
<title>My TU Dortmund Courses</title>
</head>
<body class="mx-1 my-1 bg-dark">
<div class="px-3 py-3 mb-5 text-center">
<h3 class="text-white" th:text="'Courses (' + ${totalLp} + ' LP)'"></h3>
<table class="table table-dark">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Professor</th>
<th>LP</th>
<th>Status</th>
<th>Grade</th>
<th></th>
</tr>
</thead>
<tbody>
<tr th:each="course:${courses}">
<td th:text="${course.id}" />
<td th:text="${course.name}" />
<td th:text="${course.professor}" />
<td th:text="${course.LP}" />
<td th:text="${course.status}" />
<td th:text="${course.grade}" />
<td>
<!-- Not working -->
<button type="button" class="btn btn-outline-primary btn-sm"
data-bs-toggle="modal" data-bs-target="#exampleModal"
th:attr="onclick=|editCourse('${course}')|">Edit</button>
<a th:href="@{courses/delete/{id}(id=${course.id})}" class="btn btn-outline-danger btn-sm">X</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="container w-50 bg-dark text-white">
<h3 class="text-center">Add Course</h3>
<form id="addCourse" name="addCourse" method="post" th:action=@{/courses/add} th:object="${newCourse}">
<p>Name: <input class="form-control" type="text" th:field="*{name}" /></p>
<p>Professor: <input class="form-control" type="text" th:field="*{professor}" /></p>
<p>LP: <input class="form-control" type="number" th:field="*{LP}" /></p>
<div class="form-check form-check-inline">
<label class="form-check-label">Status: </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="active"
th:field="*{status}" onclick="activeCheck();">
<label class="form-check-label" for="inlineRadio1">active</label>
</div>
<div class="form-check form-check-inline mb-3 mt-2">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="passed"
th:field="*{status}" onclick="passedCheck();">
<label class="form-check-label" for="inlineRadio2">passed</label>
</div><br>
<p id="gradeField" style="display: none">Grade: <input class="form-control" type="number" step="any"
th:field="*{grade}" /></p>
<button class="btn btn-primary mb-3" type="submit">Submit</button>
</form>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
JS:
function activeCheck() {
document.getElementById("gradeField").style.display = "none";
}
function passedCheck() {
document.getElementById("gradeField").style.display = "block";
}
function editCourse(course) {
console.log(course);
}
Solution
Okay so after a trying almost everything, I finally found the problem. The trick was to simply delete my Cache and reload the project. I guess, that the JavaScript was just loaded from my Cache and therefore did not update, when I changed it.
Answered By - Nick
Answer Checked By - Terry (JavaFixing Volunteer)
