Блог

Я пытаюсь передать данные в модальный режим в laravel. Я создал foreach и modal в blade, а 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">amp;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)
});
  

Вам нужно добавить данные перед атрибутом mytitle.

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

Вот как я это решил:

Просмотр блейда

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

Попробуйте с этим:

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

Создайте модальный режим для каждой имеющейся у вас записи, вы можете сделать это, присвоив каждому модальному режиму уникальный идентификатор.

Например:

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