0

In my Thymeleaf template I have this:

<a href="#" class="ajaxCall">Activate</a>

I have following in my JavaScript:

<script type="text/javascript">
$(document).ready(function(){
    $('body').on('click','.ajaxCall' ,function(event){
        event.preventDefault();
          alert('Ajax call made....!!!');
          event.preventDefault();
          $.ajax({
                type : "DELETE",
                url : '/activateUser/',
                success: function (result) {       
                       console.log("Activation Successful..");
                },
                error: function (e) {
                    console.log("Error ... Activation unsuccessful.!!");
                }
            });
      });
});
</script>

and following in my @Controller:

@RequestMapping(value="/activateUser/{id}", method=RequestMethod.DELETE, 
            produces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE)
    @ResponseStatus(value=HttpStatus.OK)
    @ResponseBody
      public AppUser activateAppUser(@PathVariable Long id) {
      appUserJPARepository.setAppUserAsActiveById(id);
      return null;
    }

Now, the ajax call goes fine but everytime I see this in the console:

DELETE http://localhost:8080/activateUser/ 404
send @ jquery.min.js:2
ajax @ jquery.min.js:2
(anonymous) @ tableusers:2019
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2
Error ... Activation unsuccessful.!! 

Feeling lost here. What I am missing OR what could be the reason?

Ajay Kumar
  • 2,906
  • 3
  • 23
  • 46

1 Answers1

0

It is because probably you do not receive successful response from your request. What I see clearly is that you did not give an id parameter you need to set something like this:

    var id = val; //
    $.ajax({
      type : "DELETE",
      url : '/activateUser/' + id,
      success: function (result) {       
      console.log("Activation Successful..");
    },
    error: function (e) {
      console.log("Error ... Activation unsuccessful.!!");
    }

});

To understand what is wrong going on in the background, you can open developer tool and look at network traffic, what you got as from http request.

Edit:

I forgot to mention. You can only send a GET request method ıf you want to use th:href attribute. If you insist on sending with DELETE method, you need to create form and say "delete" for such as th:method="delete".

Look at this page for reference

Eric
  • 408
  • 8
  • 22
  • Now I getting - GET http://localhost:8080/activateUser/1 405. And in the eclipse console I am getting - Request method 'GET' not supported with Whitelabel error. Also I tried with this URL in thymeleaf: Activate – Ajay Kumar May 13 '20 at 20:53
  • you should say something like this: view you are using with url path variable. You should not send it using query parameter – Eric May 13 '20 at 20:57
  • Nope. Still the same error - GET localhost:8080/activateUser/1 405 – Ajay Kumar May 13 '20 at 21:15
  • You mean delete cant be achieved using ajax? – Ajay Kumar May 13 '20 at 21:50
  • No, you can send HTTP DELETE method using ajax but not with th:href. If you will use th:href, you can only send with GET method. – Eric May 13 '20 at 21:52
  • No matter how hard I tried with help from numerous SO threads, could not get it done right. However with RESTController it works just flawlessly. I implemented it here - https://github.com/ajkr195/SpringBootFlashy/blob/master/src/main/java/com/spring/boot/rocks/controller/AppUserRestAPIs.java – Ajay Kumar May 14 '20 at 03:34