Close Modal bootstrap

#1

I’m trying to close modal bootstrap:

my code of update user:

public function updateUser($id)
{
    $data = $this->validate([
        'name' => ['required','string','max:100'],
        'email' => ['required','email',
            Rule::unique('users')->ignore($id),
        ],
        'password' => ['sometimes','nullable','min:6'],
    ]);
    
    if($this->password){
        $data['password'] = bcrypt($this->password);
    }
    
    User::where('id',$id)->update($data);

    $this->emit('userUpdated');

    $this->dispatchBrowserEvent('userUpdated', "$id");
}

First, try JS Code

<script>
    window.livewire.on('userUpdated', id => {
        alert('A user was updated with the id of: ' + id);
    })
</script>

Second try js Code:

    window.livewire.on('userUpdated', function(userId){
        alert('A user was updated with the id of: ' + userId);
    });

I got an error in both and the error in the alert is
:sunny:
A user was added with the id of: undefined

How can I get to user id to close my modal ?!

#2

Okay, so, it looks like you’re emitting the event twice and livewire on the front-end is picking up the first event. Try to change your first event to:
$this->emit('userUpdated', $id);

and then see if that results in a proper alert. If you’re not trying to view an alert of any kind and you’re just trying to close a modal, you’ll have to change the code within:

    window.livewire.on('userUpdated'), function() {
        // logic to close modal here.
        // if alpine, you can set the variable its listening for to false;
    });

Because right now, all you’re telling javascript to do is give an alert.

edit: updated formatting for clarity

#3

Thanks Worked, but having another problem now when I update a user then trying to show modal woth another user to edit him the modal does not show again!!

After update user all thing is good but got this error in console:

TypeError: initialData is null

( I do not use Alpine.js ) just bootstrap

#4

Hi,
recently I had a similar problem and I solved this issue using pretty dirty trick which actually working fine in my case

document.addEventListener("livewire:load", function(event) {
    window.livewire.hook('afterDomUpdate', () => {
        if($("#modalID").length > 0) {
            $('#modalID').appendTo(document.body);
            $('#modalID').on('hidden.bs.modal', function (e) {
                $("#modalID").remove();
            })
            $("#modalID").modal('show');
        }
    });
});

First of all my modal was placed in a fixed page header and because of this it was rendered wrongly. I had to move it to the bottom of the page. Basically as soon modal with a particular modalID is appeared on webpage it will be shown and after hide it gets deleted. Instead of ID you may probably use a class to signal - this is a modal dialog to show.
And also there is a discussion of modals here (I am sure you have seen it already):