How can I make request to a Laravel route without refreshing the entire page?

Question

I have this link in a specific section of the homepage. When clicking on this link, it calls the "forbest" route, which in turn calls the "Home" function from the controller. The function updates the list of small products on the display page.

The link to be called:

<a class="nav-link" href="{{ route('forbest', ['id' => $id]) }}" role="tab" aria-controls="hot-elec-tab" aria-selected="false">
    {{ $categorylist->name }}
</a>

The route:

Route::get('/forbest', [GuestController::class, 'Home'])->name('forbest');

The Home function:

public function Home(Request $request) {
    $productSubcategory = ProductSubCategory::where('deleted', 0)->where('status', 1)->get();
    $category = ProductCategory::where('status', 1)->where('deleted', 0)->get();
    $productCategory = ProductCategory::where('deleted', 0)->where('status', 1)->get();
    $offer = Offer::where('deleted', 0)->get();
    $featuredImage = FeaturedLink::get();
    $Blogs = Blogs::all();
    $brandList = Brand::get();

    $categoryId = $request->id;
    if ($categoryId) {
        $productList = Product::where('category_id', $categoryId)
            ->where('deleted', 0)
            ->get();
    } else {
        $productList = Product::where('deleted', 0)->get();
    }

    if ($productList->isEmpty()) {
        return redirect()->back();
    }

    if ($request->ajax()) {
        return view('partials.product_list', compact('productSubcategory', 'productList', 'category', 'productCategory', 'offer', 'featuredImage', 'brandList', 'Blogs'));
    }

    return view('guest/home')->with(compact('productSubcategory', 'productList', 'category', 'productCategory', 'offer', 'featuredImage', 'brandList', 'Blogs'));
}

The main problem with this approach is that when the route is requested, the entire display page is refreshed, and the user is returned to the top of the page.

I tried to solve the problem using methods like AJAX Request, but this approach caused other issues in the display style and did not work as expected. The attempt was as follows:

The call link:

<a class="nav-link" href="#" data-id="{{ $id }}" role="tab" aria-controls="hot-elec-tab" aria-selected="false">
    {{ $categorylist->name }}
</a>

AJAX Request JavaScript code:

// Include jQuery
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('.nav-link').on('click', function(event) {
        event.preventDefault();
        let categoryId = $(this).data('id');

        $.ajax({
            url: '{{ route('forbest') }}',
            method: 'GET',
            data: { id: categoryId },
            success: function(response) {
                $('#content').html(response);
            },
            error: function(xhr) {
                console.log('Error:', xhr);
            }
        });
    });
});
</script>

The Home function:

public function Home(Request $request) {
    $productSubcategory = ProductSubCategory::where('deleted', 0)->where('status', 1)->get();
    $category = ProductCategory::where('status', 1)->where('deleted', 0)->get();
    $productCategory = ProductCategory::where('deleted', 0)->where('status', 1)->get();
    $offer = Offer::where('deleted', 0)->get();
    $featuredImage = FeaturedLink::get();
    $Blogs = Blogs::all();
    $brandList = Brand::get();

    $categoryId = $request->id;
    if ($categoryId) {
        $productList = Product::where('category_id', $categoryId)
            ->where('deleted', 0)
            ->get();
    } else {
        $productList = Product::where('deleted', 0)->get();
    }

    if ($productList->isEmpty()) {
        return redirect()->back();
    }

    if ($request->ajax()) {
        return view('partials.product_list', compact('productSubcategory', 'productList', 'category', 'productCategory', 'offer', 'featuredImage', 'brandList', 'Blogs'));
    }

    return view('guest/home')->with(compact('productSubcategory', 'productList', 'category', 'productCategory', 'offer', 'featuredImage', 'brandList', 'Blogs'));
}

Answer 1

I can see problem in your ajax.

here is your minor mistake is url: '{{ route('forbest') }}', here jquery consider forbest as a variable. your ajax is

$.ajax({
        url: '{{ route('forbest') }}',
        method: 'GET',
        data: { id: categoryId },
        success: function(response) {
            $('#content').html(response);
        },
        error: function(xhr) {
            console.log('Error:', xhr);
        }
    });

to

$.ajax({
        url: "{{ route('forbest', '') }}"+"/"+categoryId,
        method: 'GET',
        success: function(response) {
            $('#content').html(response);
        },
        error: function(xhr) {
            console.log('Error:', xhr);
        }
    });

also change route

Route::get('/forbest', [GuestController::class, 'Home'])->name('forbest');

to

Route::get('/forbest/{id}', [GuestController::class, 'Home'])->name('forbest');

Answer 2

you should use ajax function but when you return from controller you should return json or arrays and handle the callback in ajax success function and its better to write the route in the tag as an attribute. its better to do this because its better to dont mix php code with js