Laravel 8 - jQuery 模态数据未显示答案

【问题标题】：Laravel 8 - jQuery Modal Data not showingLaravel 8 - jQuery 模态数据未显示
【发布时间】：2021-06-04 06:37:28
【问题描述】：

我正在尝试在删除确认模式中获取location_name，但它没有返回任何结果。

删除按钮：

<li>
    <a href="" class="remove" data-id="{{ $location->id }}" data-location_name="{{ $location->location_name }}" data-toggle="modal" data-target="#delete-modal">
    <span data-feather="trash-2"></span></a>
</li>

删除模态：

{{-- Modal Delete --}}
<div class="modal-info-delete modal fade show" id="delete-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-info" role="document">
        <div class="modal-content">
            <form action=" {{ route('worklocations_table.destroy',$location->id) }} " method="post">
            {{ method_field('delete') }}
            {{ csrf_field() }}
            {{-- Modal Body --}}
            <div class="modal-body">  
                <div class="atbd-notice__content">
                    <div class="atbd-notice__top text-center mt-20">
                        <div class="atbd-notice__icon bg-danger">
                            <i class="fas fa-exclamation color-white"></i>
                        </div>
                        <div class="atbd-notice__text">
                            <p>Are you sure you want to delete this location?</p>
                            <div class="mt-15">
                            <h4>Location Name</h4>
                                <input type="text" class="form-control" id="id" name="id">
                                <input type="text" class="form-control" id="location_name" name="location_name">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- Modal Buttons --}}
            <div class="modal-footer d-flex justify-content-center">
                <button type="submit" class="btn btn-default btn-squared btn-outline-primary">Yes, delete</button>          
                <button type="button" class="btn btn-default btn-squared btn-outline-light" data-dismiss="modal">No</button>         
            </div>
            
            </form>
        </div>
    </div>
</div>
{{-- Modal Delete - End --}}

JS jQuery：

<script>

    $('#delete-modal').on('show.bs.modal', function(event){

        var button = $(event.relatedTarget)
        var id = button.data('id')
        var location_name = button.data('location_name')
        var modal = $(this)
        modal.find('modal-body #id').val(id);
        modal.find('modal-body #location_name').val(location_name);
    })

</script>

结果：

模态演示不显示数据

【问题讨论】：

标签： jquery laravel bootstrap-4 bootstrap-modal

【解决方案1】：

当您使用 modal.find 时，对于您的“JS jQuery”代码中的两个值，您的 modal-body 类缺少点 (.)。我写了评论让你看看它在哪里以及为什么会发生。

<script>

    $('#delete-modal').on('show.bs.modal', function(event){

        var button = $(event.relatedTarget)
        var id = button.data('id')
        var location_name = button.data('location_name')
        var modal = $(this)
        // The find function below will not be able to select that 
        // because "modal-body" is not a valid class selector
        modal.find('modal-body #id').val(id);
        modal.find('modal-body #location_name').val(location_name);
    })

</script>

这将是没有错误的相同代码：

<script>

    $('#delete-modal').on('show.bs.modal', function(event){

        var button = $(event.relatedTarget)
        var id = button.data('id')
        var location_name = button.data('location_name')
        var modal = $(this);
        modal.find('.modal-body #id').val(id);
        modal.find('.modal-body #location_name').val(location_name);
    })

</script>

您可以在此处找到有关 jquery .class 选择器的更多信息：https://api.jquery.com/class-selector/。

【讨论】：