Using blade components and javascript

I’m using Laravel, and I’m trying to use javascript to fill a list of users. The problem is that each entry of the list is based on a view, which I made in a Blade component:

pro_list_entry.blade.php:

@if( isset($pro_id) && isset($pro_avatar) && isset($pro_name))
    <a onclick='selectProfessional( {{ $pro_id }} , {{ $pro_avatar }}, {{ $pro_name }} )' style='cursor: pointer'>
        <div class='row'>
            <div class='col-4'>
                <img class='u-avatar rounded-circle' src='{{ $pro_avatar }}'>
            </div>
            <div class='col-8 d-flex align-items-center'>
                <h6 class='fm-wrapped-text'>{{ $pro_name }}</h6>
            </div>
        </div>
    </a>
 @endisset

Then I would like to feed all those components to the list using Javascript:

var listOfPhysicians = buildProfessionalListFromData(jsonData.professionals);

$('#pc_new_app_med_list').empty();
$('#pc_new_app_med_list').html(listOfPhysicians);

…

function buildProfessionalListFromData(data) {
    var list = "";

    if (data != null) {
        for (i = 0; i < data.length; i++) {

            var entry =
            "@component('patrons.clinic.shared.pro_list_entry')"
                + "@slot('pro_id')" + data[i].professional_id + "@endslot"
                + "@slot('pro_avatar') ../../user_uploads/avatars/" + data[i].avatar + "@endslot"
                + "@slot('pro_name')" + data[i].prefix + " " + data[i].first_name + " " + data[i].last_name + "@endslot"
            + "@endcomponent";

            list = list + entry;
        }
    }
    return list;
}

After a little research, I found that what I am trying to do is simply impossible.

Is there any other way to do this? Adding list entries, which are based on a view, and filling their data with javascript? Maybe I’m just not seeing the obvious solution.

Any help?

Thank you.

Answer

You can write your blade as usual like normal and render it using render() function.

In your controller method

 function foo()
 {
    $yourView= SELF::returnYourView();
    return json_encode(['yourView' => $yourView]);
 }

functionv returnYourView()
{
    return view('yourview')->render();
}

In your jquery

$('your-parent-dev').html(response.yourview);

Advertisement

Answer