public function index()
{
$blogs = Blog::all();
$categories = Category:all();
return view('blog', compact('blogs', 'categories'));
}
We have something like the following code on the blog page. First we get all the available categories, then a list of all blogs.
@extends('layouts.app')
@section('content')
<div class="container">
<div class="category-filter" id="filter">
<div class="category-filter_item active">All</div>
@foreach($categories as $category)
<div class="category-filter_item">{{ $category->title }}</div>
@endforeach
</div>
@foreach($blogs as $blog)
<div class="blog-list {{ $blog->category_id}}">
<h2 class="blog_title">{{ $blog->title }}</h2>
</div>
@endforeach
</div>
@endsection
Can you please help to suggest a filtering function that, when choosing a specific category, will pull up all blogs from this category by ID?
document.querySelectorAll('.category-filter_item').forEach(el => {
el.addEventListener('click', () => {
document
.querySelector('.category-filter_item.active')
.classList.remove('active');
el.classList.add('active');
You could use ajax in your case by sending an ajax request to your backend and you handle the data, then you return a response, this an example of a function in controller.
public function ajaxResponse(Request $request){
if ($request->ajax()) {
$cat_id = $request->input('cat');
$blogs = Blog::query();
if ($cat_id != null) {
$blogs->whereHas("categories", function ($query) use ($cat_id) {
$query->whereIn('category_id', explode(',', $cat_id));
})->get();
}
$blogs = $blogs->get();
$blog = view('articles.ajaxblogs', ['blogs' => $blogs])->render();
}
return response()->json(['blog' => $blog]);
}
Make sure to include category id in request.