Ajax get is not working - Internal Server Error

Question

I have a homepage where there is a menu with some categories and below there are the latest 10 posts.

A post can have many categories and one category can belong to many posts so there are 2 models and a pivot table "category_post" with 2 columns: id and name.

So in the homepage, there is a menu with some categories and below the posts:

 <ul class="Categories__Menu"> 
    @foreach($categories->take(6) as $category)
        <li class="ative">
            <a href="" name="category" id="{{$category->id}}">{{$category->name}}</a>
        </li>
    @endforeach
</ul>

<div class="row" id="posts">
 @foreach($posts as $post)
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">
    <div class="card">
        <img class="card-img-top" src="{{$post->image}}" alt="Card image cap">
        <h5 class="card-title">{{$post->name}}</h5>
        <div class="card-footer d-flex justify-content-between align-items-center">
            <a href="{{route('posts.show', ['id' => $post->id, 'slug' => $post->slug])}}" class="btn btn-primary text-white">More</a>
        </div>
    </div>
</div>
@endforeach
</div>

I want that when each category is clicked to show only the posts of that category in the homepage, but in the same homepage, not in a specific category page. So maybe the best approach is using AJAX.

But Im getting an error accessing " http://proj.test/posts/where/category/5 "

ReflectionException (-1)
Class PostController does not exist

Or when I click in a category in the menu it appears in the console:

GET http://proj.test/posts/where/category/5 500 (Internal Server Error)

Do you know where is the issue?

The code:

In the FrontController I already pass the categories and posts to the homepage view:

FrontController:

class FrontController extends Controller
public function index(){
        return view('home')
            ->with('categories', Category::orderBy('created_at', 'desc')->get())
    ->with('posts', Post::orderBy('created_at','desc')->take(10)->get());

    }
  }

Post and Category models:

class Post extends Model
{
    public function categories(){
        return $this->belongsToMany('App\Category');
    }
 }
 class Category extends Model
{
    public function posts(){
        return $this->belongsToMany('App\Post');
    }
}

PostController:

public function WhereHasCategory(Request $request)
    {
        $posts = Post::whereHas('categories', function ($categories) use (&$request) {
            $categories->where('id',$request->id);
        })->get();

        return response()->json($posts);
    }

Route to the homepage:

Route::get('/', [
    'uses' => 'FrontController@index',
    'as'   =>'index'
]);

Route to the ajax part:

Route::get('posts/where/category/{id}','\PostController@WhereHasCategory')->name('category.posts');

Ajax:

$(function() {
    $("a[name='category']").on('click', function(){
        var category_id = $(this).attr("id");
        $.ajax({
            url: '{{ route('category.posts',null) }}/' + category_id,
            type: 'GET',
            success:function(result){

                $('#posts').empty();
                $.each(result,function(index, postObj){
                    $('#posts').append("<p>"+postObj.title+"</p>");
                });
                console.log(result);
            },
            error: function(error) {
                console.log(error.status)
            }
        });

    });
});

Answer 1

You've defined the class wrong in the ajax route.

Route::get(
    'posts/where/category/{id}',
    '\PostController@WhereHasCategory'
)->name('category.posts');

You've put the controller as \\PostController when I imagine it's App\\Http\\Controllers\\PostController . When you prefix the class with \\ it tells it that it's in the global scope, with no namespace. Remove the \\ .