CODEWITHSUNDEEP
laravelbootstrap-4eloquentbootstrap-modallaravel-livewire
ChrisDLH
ChrisDLH

Reputation: 133

Why the modal doesn't close in laravel livewire?

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!!

Upvotes: 3

Views: 15648

Answers (5)

Arif Maksum
Arif Maksum

Reputation: 141

Adding wire:ignore.self on modal popup

<div wire:ignore.self class="" id="">
</div>

Upvotes: 0

user14949917
user14949917

Reputation: 29

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>

Upvotes: 2

mr_nobody
mr_nobody

Reputation: 366

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

Upvotes: 4

ChrisDLH
ChrisDLH

Reputation: 133

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>

Upvotes: 8

Linesofcode
Linesofcode

Reputation: 5903

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');
});

Upvotes: 1

Related Questions