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

Question

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!

rits · Accepted Answer · 2019-08-08T13:02:08.187

0

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);
},

edited Aug 08 '19 at 13:02

answered Aug 07 '19 at 15:40

rits

1,474
7
29
49

Thank you for your answer Rudolph. I will try to implement this now and get back to you later – Donderstal Aug 08 '19 at 06:49
Thanks for taking the time to help me Rudolph. My code has improved, but the the problem remains. I now use an Ajax request to post the sort method and I've registered a route for the products.action in web.php. When I return the view with ```$sorted_products_array``` in my ```action``` method though, the front-end is not updated accordingly. If you have the time, some help would be greatly appreciated. – Donderstal Aug 08 '19 at 11:09
@Donderstal You say you are doing AJAX request. Then inside the controller you have to return a json response with data and replace the HTML contents with new data inside of AJAX successful response. You can pass a view to AJAX response `return response()->json($view, 200);` (the view could a be partial instead of whole page) and then replace contents in your AJAX call success response `container.html(data);` – rits Aug 08 '19 at 12:56
Thanks Rudolph, this worked! I'll accept your answer – Donderstal Aug 08 '19 at 13:29

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

1 Answers1