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/','AlbumsController@movePhotosToAlbumAjax')->name('users.photos.movePhotosToAlbumAjax');
Got any ideas?
Thanks in advance.
