I am trying to implement delete action for the each datatable row by invoking a bootstrap modal. And then sending a delete request to the controller with the parameter of username.
$(document).ready(function () {
$('#usersTable').DataTable({
"sAjaxSource": "users/list",
"sAjaxDataProp": "",
"aoColumns": [
{"mData": "username"},
{"mData": "firstName"},
{"mData": "lastName"},
{"mData": "status"},
{"mData": "role.roleName"},
{
mRender: function (data, type, row) {
var linkDel = "<a href=\"#\" onclick=\"fillDeleteFrm(\'username\')\">Delete</a>";
linkDel = linkDel.replace("id", row.id);
linkDel = linkDel.replace("name", row.name);
return linkDel;
}
}
]
})
});
function fillDeleteFrm(username) {
$('#delete-username').val(username);
$('#userDeleteModal').modal('toggle');
return false;
}
The thymeleaf form that calls the spring controller :
<div id="userDeleteModal">
<form id="systemUserForm" th:action="@{/userdelete}" th:method="delete">
<input type="hidden" id="delete-username" name="username" th:value="*{username}">
<button type="submit" class="btn btn-primary">Delete</button>
</div>
</form>
The corresponding spring controller :
@ResponseBody
@RequestMapping(value="/userdelete", method = RequestMethod.DELETE)
public ModelAndView deleteEmployee(@RequestParam String username) {
User user = userService.findUserByUserName(username);
userService.deleteUser(user);
return new ModelAndView("users");
}
Even though I call the delete request method the mapping does not route to this controller, alerting
HTTP Status 405 - Request method 'GET' not supported
What would I have done wrong? Thanks in advance.