DELETE request outside of form Laravel

Question

I am new to Laravel, and I am using this Jeffrey Way script to submit a DELETE request without a form.

My link:

<a class="btn btn-danger btn-sm delete" href="files/<?=$file->id?>" data-method="delete">
    <i class="fa fa-check"></i> Yes I&#39;m sure
</a>

The script, which for now is in the view file is as follows:

   $(document).on("click", ".delete", function() {

      var laravel = {
        initialize: function() {
          this.methodLinks = $('a[data-method]');

          this.registerEvents();
        },

        registerEvents: function() {
          this.methodLinks.on('click', this.handleMethod);
        },

        handleMethod: function(e) {
          var link = $(this);
          var httpMethod = link.data('method').toUpperCase();
          var form;

          // If the data-method attribute is not PUT or DELETE,
          // then we don't know what to do. Just ignore.
          if ( $.inArray(httpMethod, ['PUT', 'DELETE']) === - 1 ) {
            return;
          }

          // Allow user to optionally provide data-confirm="Are you sure?"
          if ( link.data('confirm') ) {
            if ( ! laravel.verifyConfirm(link) ) {
              return false;
            }
          }

          form = laravel.createForm(link);
          form.submit();

          e.preventDefault();
        },

        verifyConfirm: function(link) {
          return confirm(link.data('confirm'));
        },

        createForm: function(link) {
          var form = 
          $('<form>', {
            'method': 'POST',
            'action': link.attr('href')
          });

          var token = 
          $('<input>', {
            'type': 'hidden',
            'name': 'csrf_token',
              'value': '<?=csrf_token();?>' // hmmmm...
            });

          var hiddenInput =
          $('<input>', {
            'name': '_method',
            'type': 'hidden',
            'value': link.data('method')
          });

          return form.append(token, hiddenInput)
                     .appendTo('body');
        }
      };

      laravel.initialize();

    });

This is the exact script as pulled from the Gist, the only change I made is that I added the trigger $(document).on("click", ".delete", function().

The problem that I am running into is that when I click on the link to delete, I get sent to another page (like /files/6 or whatever the file id is). It is treating the <a> tag like a regular link as opposed to a DELETE request, as I would like to happen. Does anyone know why this is happening?

Answer 1

I found a solution - I had two issues.

First - you may need to include an additional slash in your href, for me I had to change

href="files/<?=$file->id?>" to href="/files/<?=$file->id?>"

Secondly, I was running into problems because my link was inside of a Bootstrap popover (within data-content) and this was further complicating matters. I reverted the script to the original one as provided by Jeffrey Way (using $(function() { instead of $(document).on("click", ".delete", function() {). Then I created a hidden link element outside of the popover:

<a href="/files/<?=$file->id?>" class="delete-file hidden" data-method="delete"></a>

And then I triggered a click on that link using jQuery (both elements were under parent <div class="panel-body">:

$(document).on("click", ".delete", function(){ 
    $(this).closest(".panel-body").find(".delete-file").trigger("click");
});

Answer 2

The default action for an anchor is to navigate, you will need to prevent it inside your click handler.

 $(document).on("click", ".delete", function(e) {
    e.preventDefault();
    ...