Trying to close a modal window when clicking a button using Livewire

I am having a problem closing a modal window with a custom script.

This is the modal window code. This code also contains the wire:click="closeWindow" code that should close the window when clicked.

<!-- Modal Right for Participants -->
            <div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" id="participants_modal_list">
                <div class="modal-dialog modal-dialog-right modal-sm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h2>Participants</h2>
                            <button type="button" class="btn btn-secondary" wire:click="closeWindow">Close Window</button>
                        </div>

                        <div>
                            <livewire:search-members wire:modalClosed="selectedMembers = $event" />
                        </div>
                    </div>
                </div>
            </div>
<!-- End Modal Right for Participants -->

Here is the search-members.php Livewire component code that is run within the modal window.

<div>
    <div class="input-group mb-g">
        <input type="text" id="members_filter" name="members_filter" wire:model="search"
            class="form-control form-control-lg shadow-inset-2 ml-2" placeholder="Filter List..">
        <div class="input-group-append">
            <div class="input-group-text">
                <i class="fal fa-search fs-xl mr-2"  wire:click="clearSearch"></i>
            </div>
        </div>
    </div>

<table width="100%" class="table-checkboxes table table-bordered" id="members">
    <tbody>
        @foreach ($members as $member)
        <tr>
            <td>
                <input type="checkbox" name="participant[]" value="{{ $member->id }}"
                wire:model="selectedMembers" {{ in_array($member->id, $selectedMembers) ? 'checked' : '' }}>
            </td>
            <td class="m-0 p-0">
                <img src="{{ URL::asset('images/user/Firefighter-Silhouette.png') }}" alt="Default Image" name="member" id="member" width="40px">
            </td>
            <td>
                <div>
                    {{ $member->lastname }}, {{ $member->firstname }}
                </div>
                <div>
                    <small>
                        {{ $member->rank }} (Shift {{ $member->shift }}, {{ $member->station }})
                    </small>
                </div>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>
</div>

Here is a Livewire script on the blade page that is supposed to close the modal window.

<script>
    document.addEventListener('livewire:load', function () {
    Livewire.on('modalClosed', () => {
        $('#participants_modal_list').modal('hide'); // Replace #myModal with the ID of your modal
    });

    Livewire.on('closeModal', () => {
        $('#participants_modal_list').modal('hide'); // Replace #myModal with the ID of your modal
    });
});
</script>

Here is the blade code that launches there modal window.



<div>
    <div class="input-group mb-g">
        <input type="text" id="members_filter" name="members_filter" wire:model="search"
            class="form-control form-control-lg shadow-inset-2 ml-2" placeholder="Filter List..">
        <div class="input-group-append">
            <div class="input-group-text">
                <i class="fal fa-search fs-xl mr-2"  wire:click="clearSearch"></i>
            </div>
        </div>
    </div>

<table width="100%" class="table-checkboxes table table-bordered" id="members">
    <tbody>
        @foreach ($members as $member)
        <tr>
            <td>
                <input type="checkbox" name="participant[]" value="{{ $member->id }}"
                wire:model="selectedMembers" {{ in_array($member->id, $selectedMembers) ? 'checked' : '' }}>
            </td>
            <td class="m-0 p-0">
                <img src="{{ URL::asset('images/user/Firefighter-Silhouette.png') }}" alt="Default Image" name="member" id="member" width="40px">
            </td>
            <td>
                <div>
                    {{ $member->lastname }}, {{ $member->firstname }}
                </div>
                <div>
                    <small>
                        {{ $member->rank }} (Shift {{ $member->shift }}, {{ $member->station }})
                    </small>
                </div>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>
</div>

Here is the closeWindow function that appears on the searchMembers.pho Livewire Controller

public function closeWindow()
    {
        $this->emitUp('modalClosed');
        $this->clearSearch();
    
        $this->dispatchBrowserEvent('closeModal'); // Dispatch a custom event to close the modal
    }

When I click on the close window button nothing happens. What is wrong with the code?

LaryAI

2 years ago

Best Answer

Level 58

The issue with the code is that the Livewire event names used in the JavaScript code do not match the event names emitted in the Livewire component.

To fix this issue, you need to update the Livewire event names in the JavaScript code to match the event names emitted in the Livewire component.

Here's the updated JavaScript code:

<script>
    document.addEventListener('livewire:load', function () {
        Livewire.on('modalClosed', () => {
            $('#participants_modal_list').modal('hide');
        });

        Livewire.on('closeWindow', () => {
            $('#participants_modal_list').modal('hide');
        });
    });
</script>

Additionally, make sure that you have included the necessary JavaScript libraries (jQuery and Livewire) in your blade file.

If the issue still persists, you can try adding a wire:click directive directly to the close button in the modal window code. Here's an example:

<button type="button" class="btn btn-secondary" wire:click="$emit('closeWindow')">Close Window</button>

This will emit the closeWindow event when the button is clicked, and the Livewire component will handle the event and close the modal window.

I hope this helps! Let me know if you have any further questions.

Please or to participate in this conversation.