Filament•3mo ago

How do I close Action modal using $wire when process is done

Hello, I am using a custom Livewire component within ->modalContent for Table Action and it works great. I need to know how to close the modal when the process is finished please? I have attached the screenshot of the code I am using inside Livewire component view. Thank you

Solution:

add this ```html <div x-data="{ modalId: null, init() {...

Jump to solution

36 Replies

Dennis Koch•3mo ago

You need to dispatch an event:

const event = new CustomEvent('close-modal', {id: 'modal_id'});
document.dispatchEvent(event)

const event = new CustomEvent('close-modal', {id: 'modal_id'});
document.dispatchEvent(event)

mohdaftab•3mo ago

Hi @Dennis Koch I am not able to find the id to pass into this CustomEvent. Please let me know how do I get it? Thank you so much.

Dennis Koch•3mo ago

I guess it's [ACTION_NAME]-action of your Action. But I guess it should appear in the HTML, too.

mohdaftab•3mo ago

Yes it appears in the html somewhere and I was able to find the close button and trigger click event. Is it not possible to retrieve the id of the modal so that I can close it by using dispatch('close-modal',id) please ?

Dennis Koch•3mo ago

[ACTION_NAME]-action didn't work?

mohdaftab•3mo ago

I am sorry, let me try this. I will check it 10 to 15 minutes, thank you so much. @Dennis Koch sorry for late reply. This is what I see on the close button $dispatch('close-modal', { id: '8dt9gfVpiFZrelMR6e9r-table-action' })

Dennis Koch•3mo ago

Is it changing between requests? Not sure how we generate that ID

mohdaftab•3mo ago

Yes it changes between requests. it is probably created using the wire-ui-elements

Dennis Koch•3mo ago

Ah, looking at the code it's the Livewire ID. I think you can retrieve that by using $wire._id

mohdaftab•3mo ago

let me try that.

LeandroFerreira•3mo ago

not related, but why not modal form? https://filamentphp.com/docs/3.x/actions/modals#modal-forms

Modals - Actions - Filament

mohdaftab•3mo ago

@Dennis Koch $wire._id didn't work.

Dennis Koch•3mo ago

As far as I understand he is using a modal form and tries to close it from JS?

mohdaftab•3mo ago

@Leandro Ferreira I am actually generating the Stripe card token before submitting the form and if I use modal form it sumbits right away. I need to run a few different tasks with it so Livewire component with the help of Alpine JS is working pretty good. The only issue is the modal not closing itself after the save I also tried to set isOpen to false it closes the modal but doesn't refresh the parent.

Dennis Koch•3mo ago

Don't know the exact var. Unfortunetaly it's not documented. You could try $wire.closeModal() which takes an additional server request

mohdaftab•3mo ago

i don't mind the additional server request though.

Dennis Koch•3mo ago

Or @this.closeModal() in your case maybe?

mohdaftab•3mo ago

Unable to call component method. Public method [closeModal] not found on component

Dennis Koch•3mo ago

Sorry, it's closeActionModal(). I already closed my editor 😅

mohdaftab•3mo ago

Unable to call component method. Public method [closeActionModal] not found on component I think it looks for the function inside Livewire component which isn't available.

Dennis Koch•3mo ago

It's part of InteractsWithActions. But it'sprotected 🤦🏼‍♂️ As a workaround you could add your own method and call $this->dispatch('close-modal', id: "{$this->getId()}-action");

mohdaftab•3mo ago

I understand, let me try to add own method. i got a few ideas with your suggestions, I hope to figure it out.

LeandroFerreira•3mo ago

do you see it inspection the browser? $dispatch('close-modal', { id: '8dt9gfVpiFZrelMR6e9r-table-action' })

mohdaftab•3mo ago

Yes I do

LeandroFerreira•3mo ago

is 8dt9gfVpiFZrelMR6e9r-table-action also the wire:key, right?

mohdaftab•3mo ago

I think so, let me check

LeandroFerreira•3mo ago

from the modal, I mean

mohdaftab•3mo ago

it is wire:id

LeandroFerreira•3mo ago

can you see <div x-ref="modalContainer"... ?

mohdaftab•3mo ago

Yes I can see x-ref="modalContainer"

LeandroFerreira•3mo ago

same wire:key?

mohdaftab•3mo ago

yes QlqEOA3nQOyBd5bKLIgp.table.actions.add.modal

LeandroFerreira•3mo ago

hum.. let me check

mohdaftab•3mo ago

Thank you

Solution

LeandroFerreira•3mo ago

add this

<div x-data="{
    modalId: null,
    init() {
        this.modalId = this.$refs.modalContainer.getAttribute('wire:key')
        this.modalId = this.modalId.substring(0,this.modalId.indexOf('.')) + '-table-action'
    }
}">

<div x-data="{
    modalId: null,
    init() {
        this.modalId = this.$refs.modalContainer.getAttribute('wire:key')
        this.modalId = this.modalId.substring(0,this.modalId.indexOf('.')) + '-table-action'
    }
}">

and then, try to dispatch it $dispatch('close-modal', {id: modalId})

mohdaftab•3mo ago

Perfect Thank you so much. I got it working before with setting isOpen to false which closed the modal but it wasn't refreshing the parent. This does exactly like I needed. Thank you so much.

Gaming

Programming

How do I close Action modal using $wire when process is done