Question

我正在尝试将数据传递给laravel中的模态。我已经在刀片中创建了foreach和modal以及在单独的文件中创建了jQuery。模态会打开，但不会传递数据。我认为我的错误是在jQuery中。

刀片代码

@foreach($course->activeLessons as $lesson)
    <article class="lesson" >
    {!! $loop->iteration!!}.  <a href="{{route('learn.show', $lesson->id)}}"></a>
        <div class="body" id="title"> {!! $lesson->title!!}</div>
        <p> {!! $lesson->short_description !!}</p>
        <div class ="interaction">
            <button type="button" class="btn btn-primary" mytitle={{$lesson->title}} data-target="#show" data-toggle="modal">
                Start Lesson
            </button>
         </div>
    </article>
@endforeach

<div class="modal fade" id="show" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="title"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            </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>

jQuery代码

$('#show').on('show.bs.modal', function (event) {
    var button =(event.relatedTarget)
    var title = button.data('mytitle')
    var modal = $(this)
    modal.find('.modal-title, #title').val(title)
});

Answer 1

您需要在mytitle属性之前添加数据。

<button type="button" class="btn btn-primary" data-mytitle={{$lesson->title}} data-target="#show" data-toggle="modal">
  Start Lesson
</button>

Answer 2

尝试这个：

$('#show').on('show.bs.modal', function (event) {
    $(this).find('.modal-title').load($(event.relatedTarget).attr('data-mytitle'));
});

Answer 3

这是我解决的方法：

刀片-查看

@foreach($course->activeLessons as $lesson)
                                    <article class="lesson" >
                                        {!! $loop->iteration!!}.  <a href="{{route('learn.show', $lesson->id)}}"></a>
                                        <div class="body" id="title"> {!! $lesson->title!!}</div>
                                        <p> {!! $lesson->short_description !!}</p>
                                        <div class ="interaction">

                                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myCourse" data-myvalue="{{$lesson->title}}" data-myvar="{{$lesson->id}}">
                                                Start lesson
                                            </button>


                                        </div>
                                    </article>
                                @endforeach

                                <div class="modal fade" id="myCourse" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                                            </div>
                                            <div class="modal-body">
                                                <span id="modal-myvalue"></span>
                                                <span id="modal-myvar"></span>
                                                <span id="modal-bb"></span>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                <button type="button" class="btn btn-primary">Save changes</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

在Js文件中

var ATTRIBUTES = ['myvalue', 'myvar', 'bb'];

$('[data-toggle="modal"]').on('click', function (e) {

    var $target = $(e.target);

    var modalSelector = $target.data('target');

    ATTRIBUTES.forEach(function (attributeName) {

        var $modalAttribute = $(modalSelector + ' #modal-' + attributeName);
        var dataValue = $target.data(attributeName);
        $modalAttribute.text(dataValue || '');
    });
});

Answer 4

为您拥有的每条记录创建一个模态，您可以通过给每个模态一个唯一的 id 来实现。

例如：

<a class="btn btn-info" role="button" data-toggle="modal" data-target="#modal-delete-{{ $item->id }}">Delete</a>

<div class="modal fade" id="modal-delete-{{ $item->id }}" tabIndex="-1"></div>

使用Laravel以模态方式传递数据

4 个答案: