Why the modal doesn't close in laravel livewire? - laravel

Question

I'am using laravel livewire to delete records in two tables, the problem is the modal, the records are being deleted but the modal still shows.
the strange thing is that when I comment one of the lines of code to delete data, it works!
I'm using Bootstrap 4.1
this is my function:
public function delete($id)
{
DB::beginTransaction();
try
{
// If I comment on any of the following two lines (it doesn't matter what line it is), it works!
DetalleRamComputadora::where('fk_computadora', '=', $id)->delete();
Computadora::where('id', '=', $id)->delete();
DB::commit();
$this->emit('confirm'); // Close modal "confirm"
session()->flash('success', 'Registro eliminado con éxito');
} catch (\Throwable $th) {
DB::rollBack();
$this->emit('confirm'); // Close modal "confirm"
session()->flash('error', 'Ocurrió un error y no se almacenó el registro');
}
}
this is the script to close modal from livewire:
window.livewire.on('confirm', () => {
$('#delete_confirm').modal('hide');
});
help me please!!

Answer 1

I was able to solve the problem. Only I added this code in the div of the modal
**wire:ignore.self**
<div wire:ignore.self class="modal fade" id="delete_confirm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
...
</div>

Answer 2

In your function delete, add a dispatch browser event
public function delete($id)
{
DB::beginTransaction();
try
{
/*...Your code ... */
$this->dispatchBrowserEvent('closeModal');
} catch (\Throwable $th) {
/*...Your code ... */
}
}
And in your app.blade.php, try adding this window event listener like so.
window.addEventListener('closeModal', event => {
$("#delete_confirm").modal('hide');
})
In that way, you will be able to close the modal by triggering the javascript from your frontend.
P.S.
There's a youtube video series for laravel livewire tutorial that actually uses Boostrap Modal for the CRUD functionality. You can watch it here!
https://www.youtube.com/watch?v=_DQi8TyA9hI

Answer 3

First of all, there's no way we can verify that #delete_confirm is actually the name of your modal. Secondly, check if the event confirm is being triggered.
window.livewire.on('confirm', () =>
{
alert('Yes, I have reached here');
});
If the event is being fired, then try the following:
window.livewire.on('confirm', () =>
{
$('.modal').modal('hide');
});
If this still does not work, force the modal to be destroyed completely:
window.livewire.on('confirm', () =>
{
$('.modal').modal('hide').data('bs.modal', null);
$('.modal').remove();
$('.modal-backdrop').remove();
$('body').removeClass('modal-open');
$('body').removeAttr('style');
});

Answer 4

I'm tired of fixing that problem also,but I got an idea that close that modal directly without any code of js and livewire,only in bootstrap itself. Here what I did:
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" wire:click.prevent="store()" data-bs-dismiss="modal">Add Students</button>

Answer 5

Adding wire:ignore.self on modal popup
<div wire:ignore.self class="" id="">
</div>