Todavía estoy muy débil en el Ajax, pero me dijeron que esta es una salida a la situación que he desarrollado.

Tengo una función javascript que filtra categorías. También hay alternancia de listas en php.blade.

Cuando hago clic en "Todos", se muestran todos los blogs y la alternancia funciona correctamente. Cuando selecciono la "categoría deseada", se muestran todos los blogs de esta categoría, pero la alternancia no funciona.

Se me indicó que puede llamar a un ajax funcional en la selección de categoría y devolver la respuesta HTML en esa llamada ajax. Pero no sé cómo hacer esto, ¿alguien puede ayudarme?

JavaScript

 $('.category-filter_item').click(function(){ $('.category-filter_item').removeClass('active') $(this).addClass('active') var dataFilter = $(this).attr('data-filter'); $('.blog-list').hide() $(dataFilter).show() })

php.blade

 @extends('layouts.app') @section('content') <div class="container"> <div class="category-filter" id="filter"> <div class="category-filter_item active" data-filter="*">All</div> @foreach($categories as $category) <div class="category-filter_item" data-filter=".category_{{$category->id}}">{{ $category->title }}</div> @endforeach </div> @foreach ($blogs as $index => $blog) <div class="blog-list"> @if ($index % 2 === 1) //Alternation <div class="blog blog--left" > <h2 class="blog_title">{{ $blog->title }}</h2> </div> @else <div class="blog blog--right"> <h2 class="blog_title">{{ $blog->title }}</h2> </div> @endif </div> @endforeach </div> @endsection

Controlador

 public function index() { $blogs = Blog::all(); $categories = Category:all(); return view('blog', compact('blogs', 'categories')); }