Laravel 5.8 Likes system with AJAX Post Request Not Working - php

Question

I am building a Like system for my recipe application in Laravel and I am not able to get my AJAX POST request to function. It just simply isn't hitting my controller, so I am not able to store any likes.
I have a relationship between three models, Like, User, Recipe.
I have an individual likes table in my DB. The code is the following:
My Models
Like
namespace App;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes;
class Like extends Model
{
protected $table = 'likes';
// Get all of the recipes that are assigned this like
public function user(){
return $this->belongsTo('App\User');
}
public function recipes(){
return $this->belongsTo('App\Recipe');
}
}
User
namespace App;
use Illuminate\Notifications\Notifiable;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
class User extends Authenticatable
{
use Notifiable;
/**
* The attributes that are mass assignable.
*
* #var array
*/
protected $fillable = [
'name', 'username', 'email', 'password',
];
/**
* The attributes that should be hidden for arrays.
*
* #var array
*/
protected $hidden = [
'password', 'remember_token',
];
/**
* The attributes that should be cast to native types.
*
* #var array
*/
protected $casts = [
'email_verified_at' => 'datetime',
];
public function recipes(){
return $this->hasMany('App\Recipe');
}
public function likes(){
return $this->hasMany('App\Like');
}
}
Recipe
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Recipe extends Model
{
//Table Name
protected $table = 'recipes';
// Primary Key
public $primaryKey = 'id';
// Timestamps
public $timestamps = true;
public function user(){
return $this->belongsTo('App\User');
}
public function category(){
return $this->belongsTo('App\Category');
}
public function comments(){
return $this->hasMany('App\Comment');
}
public function likes(){
return $this->hasMany('App\Like');
}
}
AJAX
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
// Likes AJAX
var recipeId = 0;
$('.like').on('click', function(event) {
event.preventDefault();
var isLike = event.target.previousElementSibling == null;
recipeId = event.target.parentNode.parentNode.dataset['recipeid'];
$.ajax({
method: 'POST',
url: urlLike,
data: {isLike: isLike, recipeId: recipeId},
success: function(data){
console.dir(data);
}
})
.done(function() {
event.target.innerText = isLike ? event.target.innerText == 'Like' ? 'You like this post' : 'Like' : event.target.innerText == 'Dislike' ? 'You don\'t like this post' : 'Dislike';
if (isLike) {
event.target.nextElementSibling.innerText = 'Dislike';
} else {
event.target.previousElementSibling.innerText = 'Like';
}
});
});
Controller Method
public function likeRecipe(Request $request){
$recipe_id = $request['recipeId'];
$is_like = $request['isLike'] === 'true';
$update = false;
$recipe = Recipe::find($recipe_id);
if (!$recipe) {
return null;
}
$user = Auth::user();
$like = $user->likes()->where('recipe_id', $recipe_id)->first();
if ($like) {
$already_like = $like->like;
$update = true;
if ($already_like == $is_like) {
$like->delete();
return null;
}
} else {
$like = new Like();
}
$like->like = $is_like;
$like->user_id = $user->id;
$like->recipe_id = $recipe->id;
if ($update) {
$like->update();
} else {
$like->save();
}
return null;
}
I'm getting various HTTP errors thrown at me as I mess with the AJAX file, but it is never working. Please help! Thank you in advance!

Answer 1

In this kind of situation. You need learn how to debug properly for ajax request. There are thousand reason for return 500 error.
1st step: make sure your ajax function hit your url properly. Make a simple method and dd() something.
public function likeRecipe(Request $request){
dd('Yes! it working !');
}
Go to your browser right click and Inspect then go to Network tab then you can see your request. Click on your request then look for response tab.There you can find exactly what happened.

Answer 2

405 means your likeRecipe function not running at all and 500 means there is any response error so try remove some of your code from likeRecipe function try again for example your first try could be:
public function likeRecipe(Request $request){
return null;
}