Laravel Bootstrap 4 Modal - Показать модальное событие при нажатии с AJAX данными вызова

Question

У меня есть модал, который называется call в событии click со следующим кодом:

$('.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");

});

Я получаю одну переменную из объекта, возвращенного из laravel, переданного в $('.modal-body'), но у меня есть множество переменных для передачи, а также возвращаемая модель имеет дочернюю модель «один ко многим» с несколькими записями.

Как передать значение каждой переменной? Нужно ли создавать и id=xx для каждого HTML элемента, которому я хочу передать переменную?

А как насчет записей дочерней модели, как я могу выполнить их итерацию, чтобы передать их модальному?

Или есть ли способ вернуть представление в контроллер, передать объект и работать там с шаблоном лезвия и отобразить это представление как модальное всплывающее окно?

Это пример модели:

<!--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;
    }
}

С уважением

Answer 1

Я наконец-то исправил свой код и он работает, я делюсь решением:

Код кнопки (важно удалить свойство data-target)

<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 Код

$(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);
            })

    });
});

Код контроллера

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

Представление, возвращаемое из контроллера, имеет свой первый элемент <div class="modal-content"> который имеет модальный HTML код.