php - 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？

关于子模型记录，我该如何迭代它们以便将它们传递给模态？

或者有什么方法可以在 Controller 中返回 View 并传递对象并在那里使用 Blade 模板并将该 View 呈现为模态弹出窗口？

这是模型示例:

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

    });
});

Controller 代码

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 返回的 View 有它的第一个元素 <div class="modal-content">具有模态 HTML 代码。