Filament•5mo 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•5mo 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•5mo 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•5mo ago

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

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

[ACTION_NAME]-action didn't work?

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

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

mohdaftabOP•5mo ago

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

Dennis Koch•5mo ago

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

mohdaftabOP•5mo ago

let me try that.

LeandroFerreira•5mo ago

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

Modals - Actions - Filament

mohdaftabOP•5mo ago

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

Dennis Koch•5mo ago

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

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

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

mohdaftabOP•5mo ago

i don't mind the additional server request though.

Dennis Koch•5mo ago

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

mohdaftabOP•5mo ago

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

Dennis Koch•5mo ago

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

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

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

mohdaftabOP•5mo ago

Yes I do

LeandroFerreira•5mo ago

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

mohdaftabOP•5mo ago

I think so, let me check

LeandroFerreira•5mo ago

from the modal, I mean

mohdaftabOP•5mo ago

it is wire:id

LeandroFerreira•5mo ago

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

mohdaftabOP•5mo ago

Yes I can see x-ref="modalContainer"

LeandroFerreira•5mo ago

same wire:key?

mohdaftabOP•5mo ago

yes QlqEOA3nQOyBd5bKLIgp.table.actions.add.modal

LeandroFerreira•5mo ago

hum.. let me check

mohdaftabOP•5mo ago

Thank you

Solution

LeandroFerreira•5mo 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•5mo 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