CODEWITHSUNDEEP
javascriptjquerynode.jsajaxhttp-delete
Xogno
Xogno

Reputation: 112

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

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.

Upvotes: 1

Views: 9853

Answers (2)

ComEngTr
ComEngTr

Reputation: 20

<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

Upvotes: 0

Dimitri Lavren&#252;k
Dimitri Lavren&#252;k

Reputation: 4879

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);
  });

Upvotes: 2

Related Questions