Laravel Bootstrap 4 Modal - 使用 AJAX 调用数据在点击事件上显示模式

Question

我有一个在点击事件中调用的模式，代码如下：

$('.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')，但我有很多变量要传递，而且返回的模型有一个一对多的子模型，其中包含多条记录。

如何传递每个变量值？我是否必须为要传递变量的每个 HTML 元素创建和 id=xx？

那么子模型记录呢，我如何迭代它们以便将它们传递给模态？

或者有什么方法可以在控制器中返回视图并传递对象并在那里使用刀片模板并将该视图呈现为模式弹出窗口？

这是一个模型样本：

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

从 Controller 返回的视图有它的第一个元素 <div class="modal-content">，它有模态 HTML 代码。