I have a table with events and actions to delete the events. How do I pass the id of the event (and maybe the whole event to also get the title) to the modal? I am using bootstrap and Laravel.
entry_list.blade.php:
@include('calendar.delete_event_confirmation');
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Title</th>
<th scope="col">Description</th>
<th scope="col">Start Date</th>
<th scope="col">End Date</th>
<th scope="col">All Day</th>
<th scope="col">User ID</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
@foreach ($events as $event)
<tr>
<th scope="row">{{ $event->id }}</th>
<td>{{ $event->title }}</td>
<td>{{ $event->description }}</td>
<td>{{ $event->start_date }}</td>
<td>{{ $event->end_date }}</td>
<td>{{ $event->all_day }}</td>
<td>{{ $event->user_id }}</td>
<td>
<a href="{{ route('events.show', $event->id) }}"><i class="bi bi-eye"></i></a>
<a href="{{ route('events.edit', $event->id) }}"><i class="bi bi-pencil"></i></a>
<button data-bs-toggle="modal" data-bs-target="#deleteEventModal" data-event-id="{{ $event->id }}">
<i class="bi bi-trash"></i>
</button>
</td>
</tr>
@endforeach
</tbody>
</table>
delete_event_confirmation.blade.php:
@extends('layouts.app')
@section('content')
<!-- Modal -->
<div class="modal fade" id="deleteEventModal" tabindex="-1" role="dialog" aria-labelledby="deleteEventModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteEventModalLabel">Delete Event</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete the event?</p>
<span id="eventId"></span>
</div>
<div class="modal-footer">
<form action="{{ route('events.delete', $event->id) }}" method="POST">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger">Delete</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</form>
</div>
</div>
</div>
</div>
@endsection
app.js:
$('#deleteEventModal').on('show.bs.modal', function (e) {
//get data-id attribute of the clicked element
let eventId = $(e.relatedTarget).data('event-id');
//populate the span
$(e.currentTarget).find('span[id="eventId"]').val(eventId);
});
I tried to put the id into the modal using data-bs-target="#deleteEventModal"
and passing the event to the blade file @include('calendar.delete_event_confirmation', ['event' => $event]);
but the event isn’t defined at the top.
I tried the answers at text but I get the error “Undefined variable $event” in the delete_event_confirmation file.