Level 1
@scott80109 did you solve the problem? I am also having the same issue.
Apr 1, 2022
2
Level 4
Bootstrap modal with Livewire component problems
I have a Livewire form in a Bootstrap 5 modal. When I click the submit button, the modal disappears, but the screen is still inactive (grayed out). I have no idea what's going on here. I'm submitting the form with no input, so I expect the validation to fail, the modal to stay active, and the form errors to be displayed.
Here is the code....
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add_menu_item_modal">
<i class="fas fa-plus-circle fs-4 me-2"></i>
Add Item
</button>
<div wire:ignore.self class="modal fade" tabindex="-1" id="add_menu_item_modal">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add New Menu Item</h5>
<!--begin::Close-->
<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
<span class="svg-icon svg-icon-2x"></span>
</div>
<!--end::Close-->
</div>
<div class="modal-body">
<div class="card mb-10">
<!--begin::Contacts-->
<div class="card h-lg-100">
<!--begin::Card body-->
<div class="card-body pt-5">
<!--begin::Form-->
<div>
<form wire:submit.prevent="store" class="form" action="#" method="POST">
<div>
@if (session()->has('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
@elseif ($errors->any())
<div class="alert alert-danger">
Please fix the errors in the form below to continue.
</div>
@endif
</div>
<!--begin::Input group-->
<div class="fv-row mb-7">
<!--begin::Label-->
<label class="fs-6 fw-bold form-label mt-3">
<span class="required">Title</span>
<i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="The actual text that will show
on the menu."></i>
</label>
<!--end::Label-->
<!--begin::Input-->
<input type="text" class="@error('title') is-invalid @enderror
form-control form-control-solid w-100" name="title" wire:model.lazy="title" value="" />
@error('title') <span class="text-danger">{{ $message }}</span> @enderror
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-7">
<!--begin::Label-->
<label class="fs-6 fw-bold form-label mt-3">
<span>Icon</span>
<i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="The file name of the icon."></i>
</label>
<!--end::Label-->
<!--begin::Input-->
<input type="text" class="@error('icon') is-invalid @enderror
form-control form-control-solid" name="icon" wire:model.lazy="icon" value="" />
@error('icon') <span class="text-danger">{{ $message }}</span> @enderror
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-7">
<div wire:ignore>
<!--begin::Label-->
<label class="fs-6 fw-bold form-label mt-3">
<span class="required">Menu Roles</span>
<i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="What roles will this menu
item be available to?"></i>
</label>
<!--end::Label-->
<!--begin::Select2-->
<select class="@error('role') is-invalid @enderror
form-select form-select-solid" name="role[]" data-control="select2" multiple="multiple"
wire:model.defer="role" data-placeholder="Select a role" id="roleSelect" data-allow-clear="true">
<option></option>
@foreach($roles as $role)
<option value="{{ $role->name }}">{{ $role->name }}</option>
@endforeach
</select>
<!--end::Select2-->
</div>
@error('role') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<!--end::Input group-->
<!--begin::Row-->
<div class="row row-cols-1 row-cols-sm-2 rol-cols-md-1 row-cols-lg-2">
<!--begin::Col-->
<div class="col">
<!--begin::Input group-->
<div class="fv-row mb-7">
<!--begin::Label-->
<label class="fs-6 fw-bold form-label mt-3">
<span class="required">Menu Parent</span>
<i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="Choose the menu item this
belongs under. Choose none if this is a parent menu item."></i>
</label>
<!--end::Label-->
<div wire:ignore class="w-100">
<!--begin::Select2-->
<select class="@error('parent_id') is-invalid @enderror
form-select form-select-solid" data-control="select2" name="parent_id" wire:model.defer="parent_id"
data-placeholder="Select a parent" id="parent_id_select" data-allow-clear="true">
<option></option>
<option value="0">None</option>
@foreach($parents as $parent)
<option value="{{ $parent->id }}">{{ $parent->title }}</option>
@endforeach
</select>
<!--end::Select2-->
</div>
@error('parent_id') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<!--end::Input group-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col">
<!--begin::Input group-->
<div class="fv-row mb-7">
<!--begin::Label-->
<label class="fs-6 fw-bold form-label mt-3">
<span class="required">Order</span>
<i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="The order this will appear
in the menu under the parent."></i>
</label>
<!--end::Label-->
<div class="w-100">
<!--begin::Input-->
<input type="text" class="@error('order') is-invalid @enderror
form-control form-control-solid w-100" name="order" wire:model.lazy="order" value="" />
<!--end::Input-->
</div>
@error('order') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<!--end::Input group-->
</div>
<!--end::Col-->
</div>
<!--end::Row-->
<!--begin::Input group-->
<div class="fv-row mb-7">
<!--begin::Label-->
<label class="fs-6 fw-bold form-label mt-3">
<span>Path</span>
<i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="The path of the page that the menu
item is for."></i>
</label>
<!--end::Label-->
<!--begin::Input-->
<input type="text" class="@error('path') is-invalid @enderror
form-control form-control-solid" wire:model.lazy="path" name="path" value="" />
@error('path') <span class="text-danger">{{ $message }}</span> @enderror
<!--end::Input-->
</div>
<!--end::Input group-->
</form>
<!--end::Form-->
</div>
<!--end::Form-->
</div>
<!--end::Card body-->
</div>
<!--end::Contacts-->
</div>
</div>
<div class="modal-footer">
{{-- <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>--}}
<button type="reset" id="reset-btn" wire:click="clearForm" data-kt-contacts-type="cancel"
class="btn btn-light me-3">Cancel</button>
<button wire:click="store" wire:key type="button"
class="btn btn-primary" data-kt-indicator="off">
<span class="indicator-label">Save</span>
<span wire:loading wire:target="store" class="indicator-progress">Please wait...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span>
</span>
</button>
{{-- <button type="button" wire:click.prevent="store()" class="btn btn-primary">Save</button>--}}
</div>
</div>
</div>
</div>
@push('scripts')
<script>
document.addEventListener('livewire:load', function () {
window.livewire.on('reloadform', component => {
$('#roleSelect').select2();
$('#parent_id_select').select2();
});
$("#reset-btn").click(function(e){
e.preventDefault();
$('form')[0].reset();
$('#parent_id_select').select2();
$('#roleSelect').select2();
});
$('#roleSelect').select2();
$('#roleSelect').on('change', function (e) {
let data = $(this).val();
@this.set('role', data);
});
$('#parent_id_select').select2();
$('#parent_id_select').on('change', function (e) {
let data = $(this).val();
@this.set('parent_id', data);
});
$('#myModal').on('shown.bs.modal', function (e) {
$('.jsSelect').select2({
placeholder: 'Select an option'
});
});
})
</script>
@endpush
Level 1
The issue is about the closing of the modal you have to run a js to close the modal and it will solve the issue like $('add_menu_item_modal').modal('hide')
Please or to participate in this conversation.