How to send DELETE request to node with button and jquery?

Question

I have a web page that's showing a "ressource" (aka just one entry from a mongodb collection), and on that web page I want to have a button "delete" that will send a "delete" request to the server to the correct route. The router works (so when I use an external program to send a delete request, the entry is deleted), but I want to the same with a link.

Apparently, after doing some research, I would need to use an ajax function to do that, as in this post. The problem is that I can't make it work (probably because I just started using jquery), it seems nothing happens when I click on the button. But if I try a simple alert(), it works ('#delete').on('click',function(){ alert('clicked')}); .

So

Here's the basic html :

$('#delete').on('click', function() {
  alert('click');
  //here would be the code to send the DELETE request ?
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <title>Storystrap Template</title>
  <meta name="generator" content="Bootply" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <!-- bower:css -->
  <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css" />
  <!--endbower-->
  <!-- bower:js -->
  <script src="/lib/jquery/dist/jquery.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
  <script src="/js/printplugin.min.js"></script>

  <!--inject:js-->
  <script src="/js/app.js"></script>
  <script src="/js/modernizr-custom-touch.js"></script>


</head>

<body>
  <button class="delete" data-target="/" data-method="DELETE" data-disabled="true">Delete Ressource</button>
</body>

</html>

And here is the route code in node.js (this code works if I manually send a DELETE request), the id is supposed to be in the link of the page

ressourcesRouter.route('/ressources/t/:ressourcesId')
// permet d'afficher UNE ressource spécifique
    .get(function(req,res){

        var returnRessource = req.ressource.toJSON();

        res.render('ressourceView', {
                    title: 'Ressources',
                    ressource: returnRessource
                }); 

    })
    .delete(function(req,res){
        req.ressource.remove(function(err){
            if(err)
                res.status(500).send(err);
            else{
                res.status(204).send('Removed');
                console.log('ressource supprimée');
            }
        });
    });

Could you help me out to figure the ajax code needed ? or is there another way ? Don't hesitate to ask for more code if needed, I'll be as reactive as possible to answer you quickly.

Best regards.

So make an Ajax call. What is the exact code you tried that did not work? — epascarello
– epascarello, Commented Apr 13, 2017 at 10:29
# for id but your delete button has class. So use .delete instead of #delete — 4b0
– 4b0, Commented Apr 13, 2017 at 10:35
@epascarello The one on the link, but it seemed something was wrong with my jquery. — Xogno
– Xogno, Commented Apr 13, 2017 at 11:55

Dimitri Lavrenük · Accepted Answer · 2017-04-13 10:28:23Z

2

Take a look at the jQuery ajax docs: http://api.jquery.com/jquery.ajax/

$.ajax({
  url: '/ressources/t/123',
  method: 'DELETE',
  data: yourdata
})
  .done(function( data ) {
    console.log(data);
  });

answered Apr 13, 2017 at 10:28

Dimitri Lavrenük

4,9091 gold badge19 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Masivuye Cokile Over a year ago

method: 'DELETE', ?

Xogno Over a year ago

This code works great :) ! I removed the "data" because I didn't need it though. Here's the full js code :

$('#delete').on('click', function() { 	 if (confirm("Are you sure you want to delete this ressource?"))         { 		    $.ajax({ 			  url: '/ressources/t/<%= ressource._id %>', 			  method: 'DELETE', 			}) 			  .done(function() { 			    console.log('deleted'); 			    window.location.reload(true); 		  });         } });

Dimitri Lavrenük Over a year ago

@Masivuye Cokile: yes, take a look at the HTTP request methods: en.wikipedia.org/wiki/…

ComEngTr · Accepted Answer · 2017-04-13 10:39:02Z

0

<script type="text/javascript">
$(document).ready(function(){

    $('table#delTable td a.delete_link').click(function()
    {
        if (confirm("Are you sure you want to delete this row?"))
        {
            var id = $(this).parent().parent().attr('id');
            var data = 'id=' + id ;
            var parent = $(this).parent().parent();

            $.ajax(
            {
                   type: "POST",
                   url: '../scripts/delete_link.php',
                   data: 'link=' + $(this).attr('data_link') + '&topic_pk=' + $(this).attr('data_topic') + '&topic_introduction=' + $(this).attr('data_introduction'),
                   cache: false,

                   success: function()
                   {
                    parent.fadeOut('fast', function() {$(this).remove();});
                   }
             });
        }
    });
});

 </script> just look at this. it can solution your problem. Dont Forget your datatable's name

answered Apr 13, 2017 at 10:39

ComEngTr

205 bronze badges

2 Comments

Masivuye Cokile Over a year ago

code only answers are not regarded as a good answers even though this could solve the problm

Xogno Over a year ago

@ComEngTr it seems you're not answering directly my question. Anyway, Dimitri L. 's answer helped me out!

Collectives™ on Stack Overflow

How to send DELETE request to node with button and jquery?

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related