Spring Boot Controller Not Updating Database With Ajax POST

Question

So I am using jQuery to send a POST request whenever a value of a dropdown part of a form changes, everything works EXCEPT that the Ticket is not getting updated in the DB, when I reload the page, the old values appear again. I already confirmed that it is getting the correct Status and Priority with LOGGER, but for some reason is not updating the database, and this method works service.updateTicket(existentTicket); (confirmed by another @PostMapping that uses the same line of code and updates the DB without issue)

Controller:

@PostMapping("/tickets/details/{id}")
@ResponseBody
public String updateTicketFromDetailsForm(@PathVariable Long id, @RequestParam Integer statusId, @RequestParam Integer priorityId) {
    TicketEntity existentTicket = service.findTicketById(id);

    existentTicket.setStatus(service.findStatusById(statusId));
    existentTicket.setPriority(service.findPriorityById(priorityId));

    LOGGER.warn(existentTicket.getStatus().getName());
    LOGGER.warn(existentTicket.getPriority().getName());

    service.updateTicket(existentTicket);

    return "Success";

}

Form:

            <form class="list-group list-group-flush" id="ticketDetailsForm">
                <li th:text="'Ticket ID: ' + ${ticket.getId()}" class="list-group-item">Ticket ID</li>
                <li th:text="'Created At: ' + ${ticket.getCreatedAtFormatted()}" class="list-group-item">Created
                    At
                </li>
                <li class="list-group-item">
                    <label class="ms-0">Status: </label>
                    <select class="d-inline dropdown-menu bg-gradient-info text-white text-center p-1 ms-2"
                            id="statusSelect"
                            required>
                        <option class="text-body" value="" disabled>Please select</option>
                        <option class="text-body" th:each="status : ${statuses}" id="statusOption"
                                th:value="${status.getId()}"
                                th:text="${status.getName()}"></option>
                    </select>
                </li>
                <li class="list-group-item">
                    <label class="ms-0">Priority: </label>
                    <select
                            class="d-inline dropdown-menu bg-gradient-info text-white text-center p-1 ms-2"
                            id="prioritySelect" required>
                        <option class="text-body" value="" disabled>Please select</option>
                        <option class="text-body" th:each="prio : ${priorities}" id="priorityOption"
                                th:value="${prio.getId()}"
                                th:text="${prio.name}"></option>
                    </select>
                </li>
            </form>

Screnshot of the form

And this is the jQuery:

$("#ticketDetailsForm").on("change", function () {
    $.ajax({
        method: "POST",
        url: $(location).attr('pathname'),
        data: {
            "statusId": $("#statusSelect").val(),
            "priorityId": $("#prioritySelect").val()
        }
    })
});

Not sure what I'm doing wrong, any help would be appreciated :)

Answer 1

I figured it out, I just missed th:object="${ticket}" in <form> y and th:field="*{status}" (priority one too) in <select>. Controller and jQuery was actually working.