0

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.

GeekySelene
  • 847
  • 3
  • 13
  • 31

1 Answers1

0

Browsers do not support DELETE method in forms. With th:method="delete", Thymleaf adds a hidden _method form field.

<input type="hidden" name="_method" value="delete">

If you add [HiddenHttpMethodFilter][1] filter in your application, it will convert the post request to a delete request based on the _method parameter. Try adding the following in your web.xml file.

If you are using spring boot, the filter is automatically included. But in a plain spring web mvc app, you'll have to add the filter manually in web.xml file. This filter is probably missing in your app. That is why the GET requested is not being converted to a DELETE request.

<filter>
    <filter-name>hiddenHttpMethodFilter</filter-name>
    <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
</filter>

<filter-mapping>
    <filter-name>hiddenHttpMethodFilter</filter-name>
    <url-pattern>/*</url-pattern>     
</filter-mapping>
Ranjith
  • 1,623
  • 3
  • 21
  • 34