Laravel/Blade Load data without reloading the page-CodePudding

I have a laravel 9 project with blade and boostrap5, on the left is a form with filters such as "brand", "model", "weight" and on the right I want to display the results.

I can't think of how to make the submit button load the data on the right side. I don't know whether to do "partial views" and load the information with Jquery's "load".

At the code level I have this in the view called Search.blade.php

@extends('layouts.app')

@section('content')
    <div >

        <div >
            <div >
                <h3>Category {{$category->name}}</h3>
            </div>

            // LEFT SIDE
            <div >
                Filters<br><br>
                <form>
                 Brand<br>
                 Model<br>
                 <input type=submit>
                </form>
            </div>

            // RIGHT SIDE (results)
            <div >
                @foreach ($items as $item)
                    {{$item->name}}<br>
                    {{$item->description}}<br>
                    <a href="/product/{{$item->id}}">Show product</a><br><br>
                @endforeach
            </div>
        </div>

    </div>
@endsection

This call comes from a controller where it loads ITEMS of that category

 /**
     * @param $category_name
     * @return Application|Factory|View
     */
    public function index($category_name) {

        $category = ProductCategory::where('slug',$category_name)->get()[0];

        $items = Product::where('category_id',$category->id)->take(10)->get();

        return view('productcategories/show',compact('category','items'));
    }

CodePudding user response：

Laravel livewire will do a great job.

Check https://laravel-livewire.com/docs/2.x/polling#polling-background

CodePudding user response：

Either user livewire or use ajax to achieve what you want