CODEWITHSUNDEEP
javascriptphpjqueryajaxlaravel
I Love Code
I Love Code

Reputation: 420

Laravel Delete button not working with Ajax call

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('/');
}

Upvotes: 1

Views: 1067

Answers (2)

rav
rav

Reputation: 90

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

Upvotes: 2

Gyandeep Sharma
Gyandeep Sharma

Reputation: 2327

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

Upvotes: 3

Related Questions