Filament•4mo 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•4mo 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)

mohdaftabOP•4mo 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•4mo ago

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

mohdaftabOP•4mo 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•4mo ago

[ACTION_NAME]-action didn't work?

mohdaftabOP•4mo 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•4mo ago

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

mohdaftabOP•4mo ago

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

Dennis Koch•4mo ago

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

mohdaftabOP•4mo ago

let me try that.

LeandroFerreira•4mo ago

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

Modals - Actions - Filament

mohdaftabOP•4mo ago

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

Dennis Koch•4mo ago

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

mohdaftabOP•4mo 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•4mo ago

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

mohdaftabOP•4mo ago

i don't mind the additional server request though.

Dennis Koch•4mo ago

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

mohdaftabOP•4mo ago

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

Dennis Koch•4mo ago

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

mohdaftabOP•4mo 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•4mo 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");

mohdaftabOP•4mo 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•4mo ago

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

mohdaftabOP•4mo ago

Yes I do

LeandroFerreira•4mo ago

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

mohdaftabOP•4mo ago

I think so, let me check

LeandroFerreira•4mo ago

from the modal, I mean

mohdaftabOP•4mo ago

it is wire:id

LeandroFerreira•4mo ago

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

mohdaftabOP•4mo ago

Yes I can see x-ref="modalContainer"

LeandroFerreira•4mo ago

same wire:key?

mohdaftabOP•4mo ago

yes QlqEOA3nQOyBd5bKLIgp.table.actions.add.modal

LeandroFerreira•4mo ago

hum.. let me check

mohdaftabOP•4mo ago

Thank you

Solution

LeandroFerreira•4mo 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})

mohdaftabOP•4mo 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