Render Laravel Component via Ajax method

Question

How can i render component that is sent from controller via an ajax request? For example i want to dynamically filter product using this method:

Load the index URL
Fetch the products based on the filter category or return all the products using ajax

My ajax Code:

$(document).ready(function () {
    filterData();

    // Filter data function
    function filterData() {
        // Initializing loader
        $('#product-listing-row').html('<div id="loading" style="" ></div>');
        var action = 'fetchData';
        var subCategory = getFilter('sub-category');

        /* LARAVEL META CSRF REQUIREMENT */
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // Ajax Call
        $.ajax({
            url: "/shop/filter",
            method: "POST",
            data: {action: action, subCategory: subCategory},
            success: function (data) {
                $('#product-listing-row').html(data);
            }
        });
    }

    // Get Filter by class name function
    function getFilter(className) {
        var filter = [];
        $('.' + className + ':checked').each(function () {
            filter.push($(this).val());
        });

        //console.log(filter);

        return filter;
    }

    $('.common-selector').click(function () {
        filterData();
    });
});

I am getting all the filters from ProductController

Instead of manually writing html in controller I want to return the specific component from the controller

ProductController:

public function productFilter() {
            if (!request()->action) abort('500');
            
            // Starting the query for products which are active
            $products = Product::where('is_active', '1');
            
            //dump(request()->subCategory);
            
            /* Checking the filters */
            // sub category exists
            if (request()->subCategory) $products = $products->where('sub_category_id', request()->subCategory);
            
            // Completing the query
            $products = $products->orderBy('created_at', 'DESC')->paginate(15);
            // Adding reviews and total review
            $products = Product::setProductReviewTotalReviewsAttr($products);
            
            foreach ($products as $product)
                //view('components.shop-product', ['product' => $product])->render();
                echo '<x-shop-product :product="$product"></x-shop-product>';
        }

Instead of getting the components rendered, I am receiving the whole string echoed out. Is there any way i can just get the components rendered?

Thanks in advance

Sumit Paul · Accepted Answer · 2020-06-30 08:30:07Z

Actually now I found a way to do it myself

I applied the following to the ProductController

return View::make("components.shop-product")
    ->with("product", $product)
    ->render();

Updated Code:

        public function productFilter() {
            if (!request()->action) abort('500');
            
            // Starting the query for products which are active
            $products = Product::where('is_active', '1');
            
            //dump(request()->subCategory);
            
            /* Checking the filters */
            // sub category exists
            if (request()->subCategory) $products = $products->where('sub_category_id', request()->subCategory);
            
            // Completing the query
            $products = $products->orderBy('created_at', 'DESC')->paginate(15);
            // Adding reviews and total review
            $products = Product::setProductReviewTotalReviewsAttr($products);
            
            $output = '';
            
            foreach ($products as $product) {
                $output .= View::make("components.shop-product")
                    ->with("product", $product)
                    ->render();
            }

            if (count($products) > 0)
                echo $output;
            else
                echo '<div class="col">No Data</div>';
        }

silvered.dragon · Accepted Answer · 2022-08-24 09:02:09Z

0

with laravel > 8 you can use \Blade::render directly in your controller to render even anonymouse components, here I'm rendering a table component with a lot of properties:

class componentController extends Controller {

public function index(){

   $table = [
       :tableid => "table"
       :thead => ["id","name","job"]
       :data => [
           ["1","marcoh","captain"],
           ["2","sanji","cook"]
       ],
       tfoot => false
   ];
    
    // Renders component table.blade.php
    return \Blade::render('
        <x-table
            :tableid="$tableid"
            :thead="$thead"
            :data="$data"
            tfoot
        />
    ', $table);

...

answered Aug 24, 2022 at 9:02

silvered.dragon

4832 gold badges8 silver badges27 bronze badges

Comments

Araz Ibrahim · Accepted Answer · 2023-04-04 23:24:36Z

you can use this way.

    $('.add-new-input').on('click', function () {
    $.ajax({
        url: '{{ route('getMultiLanguageComponent') }}',
        type: 'GET',
        data: {
            prefix: $(this).data('prefix'),
            name: $(this).data('name'),
        },
        beforeSend: function () {
            // before send
        },
        success: function (response) {
            // success
        },
        error: function (error) {
            // error
        }
    });
});

in controller

    public function getMultiLanguageComponent(Request $request)
{
    $component = new MultiLanguageForCurriculum(null, $request->input('prefix'));
    return $component->render()->with(['name' => $request->input('name'), 'prefixName' => $request->input('prefix'), 'required' => true]);
}

Collectives™ on Stack Overflow

Render Laravel Component via Ajax method

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related