Here is a snippet of my code from index.blade.php:
<a data-bs-toggle="modal" data-bs-target="#modal_frame" href="{{route('caborCreate')}}">link</a>
This is how the modal is coded in the create page - create.blade.php:
<div class="modal fade" id="modal_frame" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!-- Modal content goes here -->
</div>
My JavaScript code found in main.js:
$('#modal_frame').modal('show').on('show.bs.modal', function (event) {
$(this).find('.modal-body').load(event.relatedTarget.href);
});
These are the routes defined in web.php:
Route::middleware(['auth', 'verified'])->prefix('cabor')->group(function () {
Route::get('/',[CaborController::class, 'index'])->name('cabor');
Route::get('/create',[CaborController::class, 'create'])->name('caborCreate');
});
I have referred to various online sources, including this one: Bootstrap 4 with remote Modal
Your assistance in resolving the following error would be greatly appreciated:
Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop')
at Ue._initializeBackDrop (modal.js:158:39)
at new Ue (modal.js:69:27)
at Ue.getOrCreateInstance (base-component.js:65:41)
at HTMLAnchorElement.<anonymous> (modal.js:363:22)
at HTMLDocument.s (event-handler.js:118:19)
_initializeBackDrop @ modal.js:158
Ue @ modal.js:69
getOrCreateInstance @ base-component.js:65
(anonymous) @ modal.js:363
s @ event-handler.js:118