Edris899
1549
7
Laravel

Laravel 5 Ajax delete request 405 method not allowed error

Posted 9 months ago by Edris899

HI there,

#PC Specs:

- Ubuntu 18.04.1 LTS
- PHP 7.2.9
- Using apache2.

I am trying to remove a album or more with Laravel 5, jQuery & Ajax. That works ! The user can select one album with a checkmark or multiple albums to delete with a button.

The problem is, I get a this in the console of chrome.

DELETE http://www.test.nl.test/users/albums/home 405 (Method Not Allowed) Error: {readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}

This is my route:

 Route::delete('users/albums/destroy/{id}', '[email protected]')->name('users.albums.destroy');

This is the button

<div><button class='btn btn' style='background-color:#cfd8dc;' id="delete" type="submit" data-token="{{ csrf_token() }}"><i class="fas fa-trash grayText"></i></button></div>

This is the foreach loop for the album

<div class="row">
                @foreach($albums as $album)
                <div class="col-lg-2">
                    <div class="content">
                      <a id="overlay" >

                        <div class="content-overlay">
                            <div class="col-lg-2">
                                <label class="checkbox_custom">
                                    <input type="checkbox" name="checkbox_custom_a" id="{{$album->id}}">
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                        </div>

                        <img href="{{route('users.albums.show',$album->id)}}" class="content-image" src="https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362">
                        <div class="content-details fadeIn-bottom">
                          <h3 class="content-title">{{$album->name}}</h3>
                          <p class="content-text">{{$album->description}}</p>
                        </div>
                      </a>
                    </div>
                    <br>
                </div>
              @endforeach
        </div>

This is the jQuery that I use.

$( "#delete" ).on( "click", function() {
                $("input:checkbox:checked").each(function () {
                    var $input = $( this );
                    console.log("Id: " + $input.attr("id") + " Value: " + $input.val());
                    
                    var url_id = $input.attr("id");
                    
                    $.ajax({
                        type: "delete",
                        url: '/users/albums/destroy/' + url_id,
                        data: {"id": url_id , _method: 'delete'},
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function (data) {
                            console.log(data);
                            
                            //$("#url" + url_id).remove();
                        },
                        error: function (data) {
                            console.log('Error:', data);
                        }
                    });

                });
            });

This is the controller:

public function destroy($id){
        $album = Album::findOrFail($id);
        $count_photos = $album->photos()->count();
        //Delete the image on the public storage 
        if(Storage::delete('public/album_covers/'.$album->cover_image)){
            if($count_photos == 0){
                $album->delete();
                return redirect()->route('users.albums.home')->with('success', 'Album Deleted!');
            }
            else{
                foreach ($album->photos as $photo) {
                    $photo_id = $photo->pivot->photo_id;
                    $album->photos()->detach($photo_id);
                }
                $album->delete();
                return redirect()->route('users.photos.home')->with('success', 'Album Deleted!');
            }
        }
    }

--UPDATE--

Tried to change request type to post but I will dump the whole html body in the console. meh :(

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.