Edris899
896
23
Laravel

How to fetch data from a ajax post request in the controller? Getting no data

Posted 10 months ago by Edris899

Hi there,

I am building a illustration & album website in Laravel 5.6. I want to move a picture from a album to a different album with ajax.

The idea is to first select a picture with a checkbox on it. Then click on a button that toggles a bootstrap modal popup. Choosing the or selecting 1 album to move to. Then hitting the submit button.

The problem is that I don't get the data from the jquery ajax request. Only getting this response back

array:2 [▼
  "_method" => "POST"
  "_token" => "PURBuZhwRdDqMoVAQwoseoZsffQC2e6N2DDqpiYB"
]

This is the html code.

<form data-toggle="validator" action="{{route('users.photos.movePhotosToAlbumAjax')}}" method="post">
   {{method_field('POST')}}
   @csrf
   <div class="form-group">
      <label for="exampleFormControlSelect1">Choose a album</label>
      <select class="form-control" id="chosenAlbum">
         @foreach($albums as $album)
         <option id="{{$album->id}}" value="{{$album->id}}">{{$album->name}}</option>
         @endforeach
      </select>
   </div>
   <div class="row text-center">
      <div class="col-lg-6 offset-lg-3">
         <input data-token="{{ csrf_token() }}" id="moveIllustrationSubmit" type="submit" class="btn btn-success" value="Move Illustration"/>
      </div>
   </div>
</form>

This is the code in the controller.

public function movePhotosToAlbumAjax(Request $request){
        $data = $request->all();
        dd($data);
        return response()->json(['success'=>'Got Simple Ajax Request.']);;
    }

And this is the jquery.

$("#moveIllustrationSubmit").on("click", function() {
    $("input:checkbox:checked").each(function() {
        var $input = $(this);
        var photo_id = $input.attr("id");
        //console.log("Id: " + $input.attr("id") + " Value: " + $input.val());
        $("#chosenAlbum").change(function() {
            var albumId = $(this).find('option:selected').attr('id');

            //var albumId = $("#chosenAlbum").find('option:selected').attr('id');
            $.ajax({
                type: "post",
                dataType: 'JSON',
                url: '/users/photos/movePhotosToAlbumAjax/',
                data: {
                    "photo_id": photo_id,
                    "albumId": albumId,
                    _method: 'post'
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    console.log("de response terug");
                    console.log(response);
                    //$('#photo-' + url_id).remove();

                },
                error: function(qXHR, textStatus, errorThrown) {
                    console.log(JSON.stringify(jqXHR));
                    console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
                }
            });
        });
    });
});

This is the route.

    Route::post('users/photos/movePhotosToAlbumAjax/','[email protected]')->name('users.photos.movePhotosToAlbumAjax');

Got any ideas? Thanks in advance.

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