How to use @Delete annotation in Vraptor + AJAX?

Question

In my Vraptor project I am trying to delete a record from a list without the page being reloaded. By the book I am following, AJAX is used so that the record removed "suma" without the whole page being loaded. The error below occurs when I try to use the @Delete annotation of vraptor.

HTTP Status 405 -

type: Status report

Description: The specified HTTP method is not allowed for the requested Resource.

My controller:

@Controller
@Path("/pessoa")
public class PessoaController {
[...]

@Delete("/remove/{codPessoa}")
public void remove(Long codPessoa) {
Pessoa pessoaEncontrada = repository.findById(codPessoa, 1);
    if (pessoaEncontrada != null) {
       repository.delete(pessoaEncontrada);
       result.nothing();
    } else
       result.notFound();
}}

On the JSP page:

<script src="${pageContext.request.contextPath}/js/jquery-2.1.4.min.js"></script>
<script>
    $("#pessoas.remove").on("click", function(event) {
        event.preventDefault();
        var pessoa = $(this).closest(".pessoa");
    });
    $.ajax({
        url : $(this).attr("href"),
        type : "POST",
        data : {_method : "DELETE"}
    }).done(function(data, textStatus, jqXHR) {
        pessoa.fadeOut();
    }).fail(function(jqXHR, textStatus, errorThrown) {
        alert("Cliente não foi alterado! " + errorThrown);
    });

[...]

<ul id=pessoas>
    <c:forEach items="${pessoaList}" var="pessoa">
        <li class="pessoa">${pessoa.codPessoa}-${pessoa.nomeFantasia}
            <a href="${linkTo[PessoaController].edita(pessoa.codPessoa, pessoa.codEmpresa)}"> -Editar</a> 
            <a class="remove" href="${linkTo[PessoaController].remove(pessoa.codPessoa)}"> -Remover</a>
        </li>
    </c:forEach>
</ul>

Answer 1

I was able to make it work. But not by using @Delete. In fact, attribute "_method: 'DELETE'" is a parameter passed to Vraptor (according to what I read). Workaround: Replaces @Delete with @Path in the method and the deletion was performed. The mistake I was making is that in my script (js), the $.ajax was out of the Function, and the selector #people remove. should have a space between "#people" and ". remove" ("#people . remove"). Changing these structures the implementation worked.

Answer 2

The problem is you’re trying to make a POST to a resource that only accepts DELETE, The solution is easy, you just need to correctly indicate which html method you want to use in the request:

$.ajax({
    url : $(this).attr("href"),
    method : "DELETE"
})

If you are using a jQuery version earlier than 1.9.0, instead of method use type same. Any doubt about the attributes of the ajax method, check the documentation.