I'm trying to implement a likes system for my Laravel web app. It is a recipe application. To build the likes system, I'm using AJAX (my previous likes system was simply through Laravel using Many-to-Many but this required page load for every like). The issue I am getting is an Internal Server Error 500 whenever I hit the like button, and I don't know why. I've been messing with it for hours and can't get anything out of it.
AJAX
// Likes AJAX
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var recipeId = 0;
$('.like').on('click', function(event){
event.preventDefault();
recipeId = event.target.parentNode.parentNode.dataset['recipeId'];
var isLike = event.target.previousElementSibling == null;
$.ajax({
method: 'POST',
url: urlLike,
data: {isLike: isLike, recipeId: recipeId},
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
})
.done(function(){
event.target.innerText = isLike ? event.target.innerText == 'Like' ? 'You like this' : 'Like':
event.target.innerText == 'Unlike' ? 'You like this' : 'Unlike';
if(isLike){
event.taget.innerText = 'Unlike';
} else {
event.taget.innerText = 'Like';
}
});
});
Blade/View
{{-- Likes --}}
@if (Auth::check())
<div>
<button class="like" data-recipeId="{{$recipe->id}}">Like!</button>
<span id="likes-count-{{$recipe->id}}"></span>
</div>
@else
<div>
<a href="{{route('login')}}">
<button>Like It!</button>
</a>
<a href="{{route('login')}}">
<button>Unlike It!</button>
</a>
</div>
@endif
The following are included in my layouts file.
<script>
var urlLike = '{{ route('like') }}'
</script>
<script src="/js/custom.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}">
Does anyone know where I should begin to search for the error and how I should go about correcting it? If you need any more code, such as my controllers or models, please let me know.