Как передать значение @foreach в Bootstrap Modal? Laravel 7,3 - PullRequest
Новая
       9

Как передать значение @foreach в Bootstrap Modal? Laravel 7,3

0 голосов
/ 01 апреля 2020

У меня есть список категорий, из которых я хочу передать {{category.name}} в данные в Bootstrap модальные. Я хочу добиться этого, когда я нажимаю на указанную кнопку c, чтобы показать название категории в модале в виде сообщения?

Категории 


    <div class="card mt-2">@foreach($categories as $category)
            <ul class="list-group list-group-flush">
                <li class="list-group-item">{{ $category->name}}
                    <a href="" class="btn btn-danger btn-sm ml-2 float-right"
                        onclick="handleDelete({{$category->id}})">Delete</a>
                    <a href="{{route('categories.edit', $category->id)}}" class="btn btn-info btn-sm float-right">Edit</a>
                </li>
            </ul>
            @endforeach
     </div>

Оттуда, где я пытался передать {{$ category-> name}} в элемент div, но он показывает последний элемент из l oop.

Modal 


    <form action="" method="POST" id="deleteCategoryForm">
            @csrf
            @method('DELETE')
            <div class="modal fade" id="deleteModalCenter" tabindex="-1" role="dialog" aria-labelledby="deleteModalCenterTitle"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalCenterTitle">Delete category</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>

                        <div class="modal-body">
                            Are you sure you want to delete "{{$category->name}}" ?
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-dismiss="modal">Go Back</button>
                            <button type="submit" class="btn btn-danger">Yes, Delete</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>

JS Сценарий 


     <script>
            function handleDelete(id){
                event.preventDefault();        
                var form = document.getElementById('deleteCategoryForm');
                console.log('Delete', form);
                form.action = '/categories/' + id;
                $('#deleteModalCenter').modal('show');
            }
    </script>

Заранее спасибо

...