I'm using Spring and thymeleaf to make a little web page with a form. There is a table below in which a td with a field must display a dropdown list loaded from elsewhere with ajax. The dropdown is displayed but the user can't choose an option as it resets itself.
Javascript:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" th:inline="javascript">
$(document).ready(function() {
$(".dropdown").click(function() {
$(".dd").remove();
$(this).load('/ajax/dropdown');
$(this).removeClass('dropdown').addClass('down');
})
});
</script>
Field to change:
<td class="dropdown" th:text="${device.getEmployee()}">Employee</td>
<input class="dd" type="hidden" name="employee" th:value="${device.getEmployee().getId()}"/>
The replacing code:
<div th:fragment="cambiodd" id="cambio">
<select name="employee">
<option value="">Seleccionar empleado:</option>
<option th:each="employee : ${lemp}"
th:value="${employee.getId()}"
th:text="${employee.getId()}+' : '+${employee.getName()}"></option>
</select>
</div>
I get the following error message when I click on the cell:
[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.
but I haven't found any relationship between that "violation" and the issue. Right now I'm not sure if the issue has to do only with javascript or if there is something wrong elsewhere in spring or thymeleaf.
