Как отображать теги на всплывающих окнах? Laravel

Question

У меня есть простая таблица страниц, в которой я отображаю список страниц, визуальный вид выглядит следующим образом.

Ожидаемый результат:

Теперь я хочу, чтобы, когда пользователь щелкает теги просмотра, он отображал теги, связанные с этой страницей

Например, если пользователь щелкает тег просмотра в первой строке с идентификатором 6, он должен отображать тег tes1 во всплывающем моде, если пользователь щелкает тег просмотра в первой строке с идентификатором 7, он должен отображать тег с именем test2 во всплывающем моде

Проблема:

Теперь, когда пользователь нажимает кнопку просмотра тегов в любой строке, я получаю следующий результат

Вот как я отображаю теги во всплывающем окнекогда пользователь нажимает кнопку просмотра тегов

<button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#exampleModal">
    {{ __('view tags') }}
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" 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="exampleModalLabel">Tag List</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="table">
                    <thead class=" text-primary">
                        <th>
                            ID
                        </th>
                        <th>
                            name
                        </th>
                    </thead>
                    <tbody>
                        @foreach ($page->tags as $tag)
                        <tr>
                            <td>
                                {{ $tag->tag->id }}
                            </td>
                            <td>
                                {{ $tag->tag->name }}
                            </td>
                        </tr>
                        @endforeach

                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Вот мой репозиторий: мой демонстрационный репозиторий

Answer 1

Проблема с вашим кодом в том, что он всегда показывает первый модал.

Вот решение: -

 <button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#exampleModal-{{ PageID }}">
        {{ __('view tags') }}
    </button>

    <!-- Modal -->
@foreach ($pages as $page)
    <div class="modal fade" id="exampleModal-{{ $page->ID }}" 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="exampleModalLabel">Tag List</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table">
                        <thead class=" text-primary">
                            <th>
                                ID
                            </th>
                            <th>
                                name
                            </th>
                        </thead>
                        <tbody>
                            @foreach ($page->tags as $tag)
                            <tr>
                                <td>
                                    {{ $tag->tag->id }}
                                </td>
                                <td>
                                    {{ $tag->tag->name }}
                                </td>
                            </tr>
                            @endforeach

                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
@endforeach

Другое решение

Нажав на кнопку View tag, вызовите ajax и обновите данные в модальном режиме.

Answer 2

Передайте свой идентификатор страницы в ваш модальный

<button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#exampleModal{{$page->id}}">
    {{ __('view tags') }}
</button>

<div class="modal fade" id="exampleModal{{$page->id}}" 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="exampleModalLabel">Tag List</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="table">
                    <thead class=" text-primary">
                        <th>
                            ID
                        </th>
                        <th>
                            name
                        </th>
                    </thead>
                    <tbody>
                        @foreach ($page->tags as $tag)
                        <tr>
                            <td>
                                {{ $tag->tag->id }}
                            </td>
                            <td>
                                {{ $tag->tag->name }}
                            </td>
                        </tr>
                        @endforeach

                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Answer 3

Вы создаете свой модальный код и код кнопки в цикле foreach?

Если это так - я не говорю, что это идеальное решение, но оно работает. Я думаю, что проблема может заключаться в том, что свойство data-target свойства кнопки открытия модели точно одинаково для каждого из них. Кроме того, модальный идентификатор одинаков для каждой отдельной строки.

Так что каждый раз, когда вы нажимаете кнопку открытия модального окна, он открывает первый модальный, тот, который на вашей картинке.

Что бы я хотелПредлагаем сделать либо сделать 1 модальный, содержимое которого изменяется при нажатии кнопки JavaScript.

Если вы не хотите использовать JavaScript, вы должны добавить уникальные значения к своему модальному идентификатору и кнопке data-target. Вот пример для кнопки:

<button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#exampleModal{{$page->id}}">
{{ __('view tags') }}

</button>

Пример для первой строки модалов:

<div class="modal fade" id="exampleModal{{$page->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">