Laravel Delete button not working with Ajax call

Question

I have a Laravel post application where I create and display posts. I am now trying to delete a post using an Ajax call. Let's say I have 10 posts displaying. When I click on the delete button of the first post, I get a 405 Method Not Allowed error. When I click on the delete button on any of the posts below, absolutely nothing happens, no error or warning message. Please take note that my CSRF tokens are set up and working. Any help or suggestions will be appreciated.

Here is the HTML:

    @foreach($posts as $post)
    <div class="postContainer" id="post{{ $post->id }}">
      <h4 class="postHeading" id="showtitle">{{ $post->title }}</h4>
      <p class="post" id="postBody">{{ $post->post }}</p>
      <span class="authorName" id="showauthor">{{ $post->author }}</span>
      <span class="postDate" id="showpostDate">{{ $post->created_at }}</span>
      <input type="submit" name="delete" id="delete" value="Delete" data-id="{{ $post->id }}">
    </div>
    @endforeach
    <div class="message" id="message">

    </div>

Here is my Ajax call:

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

      var id = $(this).attr('data-id');

      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr("content")
        }
      });

      $.ajax({
        url: '/index/delete/' + id,
        type: "POST",
        data: {_method: 'delete'},
        success:function(response){
          $("#message").append("<div>" + response.message + "</div>");
        },
      });

    });

Here is my Route:

   Route::post('/index/delete/{id}', 'HomeController@delete');

Here is my controller:

public function delete($id){
  Post::find($id)->delete();
  return redirect('/');
}

FYI better to use the .data('id') instead of .attr('data-id') — techie_28
– techie_28, Commented Jan 16, 2018 at 6:55

Gyandeep Sharma · Accepted Answer · 2018-01-16 06:40:27Z

3

Change this in your code

id to class

<input type="submit" name="delete" class="delete" value="Delete" data-id="{{ $post->id }}">

in script

call class(.) not id(#)

and data('id') not attr('data-id')

$(".delete").on("click", function(){
    var id = $(this).data('id');

answered Jan 16, 2018 at 6:40

Gyandeep Sharma

2,3274 gold badges24 silver badges40 bronze badges

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

5 Comments

I Love Code Over a year ago

Thank you, it is solved now. Only thing is - I don't understand why the class must be used instead of id? I used an Ajax call to insert data and I used the id and it worked 100%. Can you maybe explain, please? Thank you, again.

Gyandeep Sharma Over a year ago

ID is identity of any object. That must be unique for every new object or element if you provide same ID to more then one element then that ID assign to the element appears first. The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id. Link

I Love Code Over a year ago

And yet my id "delete" was unique... Still don't understand why use class instead.

Gyandeep Sharma Over a year ago

You are using this in foreach loop.. That make is repeat... for each iteration...

I Love Code Over a year ago

Oh I see! Now I understand. Thanks :)

rav · Accepted Answer · 2018-01-16 06:50:51Z

Sorry I don't have the reputation to comment so I'm posting this as an answer. And yes you have to change your javascript because ID is unique and you can only give it to one input and call one input by it. In your routes/web.php I would do Route::post('/index/delete/{post}', 'HomeController@delete')->name('posts_delete'); name is optional for a named route but it often helps (with a named route you can do {{ route('posts_delete') }} for the url in your ajax but you have to add the id as data So in your HomeController you can do

public function destroy(Post $post)
{
  $post->delete();
  return back();
}

Don't forget use App\Post;

Also I would recommend a PostController that handles Posts php artisan make:controller PostsController --resource creates a Controller with methods like destroy

Collectives™ on Stack Overflow

Laravel Delete button not working with Ajax call

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related