Laravel Bootstrap 4 Modal - Show modal on click event with AJAX call data

Question

I have a modal which is call in a click event with the following code:

$('.openBtn').on('click',function(){

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

        $.ajax({
            type: 'GET',
            url: '/property/details/KWS1389776',
            dataType: 'JSON',

            success: function (data) {
                console.log(data);
                $('.modal-body').text(data.prop_title);


            },
        })

        var xhr = $.ajax();
        console.log(xhr);

        // $('#kt_modal_4_2').modal("show");

});

I'm getting one variable from the object returned from laravel passed into $('.modal-body') but I have lot of variables to pass and also the model returned has a one to many child model whith multiple records.

How can I pass each variable value? Do I have to create and id=xx for each HTML element which I want to pass a variable?

And what about child model records, how do I iterate them in order to pass them to the modal?

Or is there any way yo return view in controller and pass the object and work with blade template there and render that view as modal popup?

This a the model sample:

<!--begin::Modal-->
<div class="modal fade" id="kt_modal_4_2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">New Message</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="recipient-name" class="form-control-label">Recipient:</label>
                        <input type="text" class="form-control" id="recipient-name">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="form-control-label">Message:</label>
                        <textarea class="form-control" id="message-text"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Send message</button>
            </div>
        </div>
    </div>
</div>
<!--end::Modal-->

class PropertyController extends Controller
{
    public function details($id)
    {
        $property = Property::where('prop_id', $id)->first();
        // return view('pages.processes.offerdemand.matchs.propertymodal', compact('property'));
        return $property;
    }
}

Regards

Answer 1

I finally got my code fixed and it's working, i'm sharing the solution:

Button Code (it's important to remove data-target property)

<button type="button"
    class="btn btn-label-primary btn-lg btn-upper openBtn"
    data-toggle="modal"
    data-id = {!! $match->prop_id !!}>
    {{ __('pages/processes/offerdemand.labels.matchs.index.button.viewproperty') }}
</button>

JS Code

$(document).ready(function () {
    $('.openBtn').on('click', function () {

        var prop_id = $(this).data('id');
        console.log(prop_id);

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

        $.ajax({
                type: 'GET',
                url: '/property/details/' + prop_id,
                dataType: 'HTML',

                success: function (data) {

                },
            }).then(data => {
                $('.modal-content').html(data);
                $('#kt_modal_4_2').modal("show");
            })
            .catch(error => {
                var xhr = $.ajax();
                console.log(xhr);
                console.log(error);
            })

    });
});

Controller Code

class PropertyController extends Controller
{
    public function details($id)
    {
        $property = Property::with('attributes', 'addons', 'distributions', 'images', 'attributes_2', 'services')
                    ->where('prop_id', $id)
                    ->first();
        // dd($property);
        return view('pages.processes.offerdemand.matchs.propertymodal', compact('property'));
    }
}

The view returned from Controller has it's first element <div class="modal-content"> which has modal HTML code.