Как передать php переменных в модальный bootstrap 4

Question

У меня есть проект laravel, в котором у меня есть рекурсия, в которой для каждого элемента я хочу создать другой html элемент. Когда я нажимаю на эти ссылки, я хочу открыть модальное окно, передав правую переменную в зависимости от элемента, на котором я щелкнул.

EDIT: отредактировал anteprima.blade. php:

<div class="rounded py-3 col-md-3 my-2 border mr-4">
<h5 class="font-weight-bold ellipsis"><i class="fas fas fa-list-ul mr-2"></i>{{ $playlist->nome }}</h5>

<small class="text-muted">Creata: {{ $playlist->created_at->diffForHumans() }}</small>

<div class="row px-3">
    <div>
        <button class="btn-sm btn-light border mr-2 open-modal my-2">Rinomina</button>
    </div>
    <div>
        <form method="post" action="{{ route('playlists.destroy', $playlist) }}">
            @csrf
            @method('delete')
            <button type="submit" class="btn-sm btn-secondary border my-2">Cancella</button>
        </form>
    </div>
</div>

<script type="text/javascript">
$( document ).ready(function() {

    $(document).on("click", ".open-modal", function () {
        var myvariable = $(this).data('myvariable');
        $('#rename_playlist').modal('show', myvariable);
        console.log(myvariable);

    });
});
</script>

С кодом, который у меня теперь есть, модальный всегда принимает последний $ playlist, но я хочу, чтобы для каждой ссылки был другой $ playlist.

EDIT: отредактированный index.blade . php:

@extends('layouts.dashboard')

@section('content')

<div class="container-fluid">
    <div class="row">
        <div class="btn btn-warning rounded py-3 col-md-3 my-2 border mr-4" data-toggle='modal' data-target='#create_playlist'>
            <h5 class="font-weight-bold ellipsis"><a href="#"><i class="fas fa-plus-square mr-2"></i>Nuova Playlist</a></h5>
        </div>
@foreach ($playlists as $playlist)
    @include('anteprima')
@endforeach
    </div>
</div>

<div class="modal fade" id="rename_playlist" data-myvariable='{{ json_encode($playlist) }}' tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">

        <div class="modal-content">
            <form method="post" action="{{ route('playlists.update', $playlist) }}">
                @csrf
                @method('patch')
                <div class="modal-header">
                    <h5 class="modal-title font-weight-bold" id="exampleModalCenterTitle">Rinomina {{ $playlist->nome }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <input type="text" name="nome" value="{{ old('nome') }}" class="form-control" placeholder="Nome della playlist" required />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">Cancella</button>
                    <button type="submit" class="btn btn-warning">Rinomina</button>
                </div>
            </form>
        </div>

    </div>
</div>

@endsection

ОБНОВЛЕНИЕ: я решил это, используя идентификатор для каждого модального окна внутри рекурсии.

Answer 1

Вы можете отправить дополнительные данные в модальное окно, добавив к атрибуту data так:

<div class="btn btn-warning rounded py-3 col-md-3 my-2 border mr-4" data-toggle='modal' data-target='#create_playlist' data-myvariable="your_data_here">
{{content}}
<div>

Затем в JS вы можете сделать:

var myvariable = $(this).data('myvariable');