phpjquerylaravellaravel-bladephpdebugbar

How can I reload a View after sorting product data in a Laravel controller?


In a site I'm working on, I'm having some problems rendering a view. On the websites products-list page, there's a little 'Sort by...' element. When the user selects one of the options, it should reload the products page with the sorted products, or load the same view on a different URL with the sorted products. Either one is fine, I just want the ordered products to be displayed. Sorting the products in my ProductsController is working out just fine, but I keep running into problems when I want to pass these sorted products to the front-end. The view I'm returning in the code below is the same as the normal view for the products-list page. Just fyi: I'm relatively new to Laravel and used to work mainly with JavaScript, so I might be trying to do this in an exceptionally silly, non-Laravel way.

Ideally, I would just like to pass the sorted products to the Blade file for the products-list page. I've tried that, but I don't know how to trigger a reload. What I then tried, is directing the user to a new route (which I registered in the web.php), where I was planning to render the same Products view, but with sorted data. This didn't work either, and gave me a blank page with a vague jQuery error message.

In the ProductsController.php:

public function sortController($type) {

        $available_products = Products::with(['gallery', 'slug'])->get()
        ->where('status', 'available');

        $number_of_products = count($available_products);

        $product_names_sorted_by_type 
            = $this->orderProductTitlesBasedOnNumber($number_of_products, $available_products, $type);

        $sorted_products_array = $this->orderProductsBasedOnSortedArray($number_of_products, $available_products, $product_names_sorted_by_type);

        $product_brands_controller = new ProductsBrandsController;
        $brands_list = $product_brands_controller->getBrandNamesArray();

        return view('aanbod')->with([
            'title' => 'Ons aanbod',
            'products' => $sorted_products_array,
            'brands' => $brands_list
        ]);
    }

In my App.js:

function handleSortRequest(sortRequest) {

    sortURL = window.location.origin + '/autos/list/sort?q=' + sortRequest

    location.href = sortURL  

}

In my Web.php:

Route::group(['prefix' => config('site.products.url'), 'as' => 'products.'], function () {
// some other routes...
Route::get('/list/sort/{sort_request}', 'ProductsController@handleSortRequest')->name('sort');
});

Anyway, this isn't working and nothing is rendering at all. I just get a blank page with the following error: "TypeError: a is undefined - javascript:2771" This error seems to occur in the jQuery file that the PHPDebugbar uses.

Hope this wasn't to much text. Thanks in advance, let me know how I can improve my Laravel code!


Solution

  • I would instead suggest you to have the sort selection inside a form and upon selecting sort method send a request (via js or by clicking a submit button). Then handle sorting logic in controller based on value of selection and return the view with sorted collection.

    Route:

    Route::post('/product/list', [
        'uses' => 'ProductController@action',
        'as' => 'product.action'
    ]);
    

    ProductController action:

    public function action(Request $request)
    {
        if (isset($request['sort'])) {
            // do the sorting logic
        }
        ...
    
        // return view with your sorted products
        return view('product.list', ['products' => $sortedProducts]);
    }
    

    This is just an example of a more Laravel way of doing it.

    If you are doing AJAX request:

    ProductController action

    ...
    $view = view('product.list', ['products'=> $sortedProducts])->render();
    
    if ($view) {
        return response()->json($view, 200);
    } else {
        return response()->json(null, 400);
    }
    ...
    

    app.js

    // inside ajax request
    success: function(data) {
        $('#some-container').html(data);
    },