Close open modal from listener on PHP side?

I am halting my form submission on a subscription relation manager's table header action:

->headerActions([
                CreateAction::make()
                    ->label('New subscription')
                    ->modalWidth('md')
                    ->action(function ($data, $livewire, $action) {
                        $livewire->dispatch('stripe-payment', data: $data);

                        // Prevent the modal from closing
                        $action->halt();
                    })
            ])

->headerActions([
                CreateAction::make()
                    ->label('New subscription')
                    ->modalWidth('md')
                    ->action(function ($data, $livewire, $action) {
                        $livewire->dispatch('stripe-payment', data: $data);

                        // Prevent the modal from closing
                        $action->halt();
                    })
            ])

This is so I can have the content of my stripe payment field processed separately.

Once my stripe payment field's validation has run and is successful, I trigger this event:

Livewire.dispatch('finalize-subscription-create')

Livewire.dispatch('finalize-subscription-create')

In the listener on the PHP side, I want to close the open modal and send out a notification. I am trying:

#[On('finalize-subscription-create')]
    public function finalizeSubscriptionCreate()
    {
        $this->dispatch('close-action-modal');

        Notification::make()
            ->title('Subscription created')
            ->success()
            ->send();
    }

#[On('finalize-subscription-create')]
    public function finalizeSubscriptionCreate()
    {
        $this->dispatch('close-action-modal');

        Notification::make()
            ->title('Subscription created')
            ->success()
            ->send();
    }

The notification is sent but the modal is not closed. Can anyone advise on how to do this please?

Solution

Use something like that

->action(function ($data, $livewire, $action) {

    $modalId = str($livewire->getId())
        ->prepend('fi-')
        ->append('-action-0')
        ->toString();

    $livewire->dispatch('stripe-payment', data: $data, modalId: $modalId);

    $action->halt();
})

->action(function ($data, $livewire, $action) {

    $modalId = str($livewire->getId())
        ->prepend('fi-')
        ->append('-action-0')
        ->toString();

    $livewire->dispatch('stripe-payment', data: $data, modalId: $modalId);

    $action->halt();
})

#[On('stripe-payment')]
public function stripePayment(array $data, string $modalId): void
{
    // ...
    $this->dispatch('close-modal', id: $modalId);
}

#[On('stripe-payment')]
public function stripePayment(array $data, string $modalId): void
{
    // ...
    $this->dispatch('close-modal', id: $modalId);
}

Jump to solution

Filament•5mo ago•

4 replies

keiron

Close open modal from listener on PHP side?

I am halting my form submission on a subscription relation manager's table header action:

->headerActions([
                CreateAction::make()
                    ->label('New subscription')
                    ->modalWidth('md')
                    ->action(function ($data, $livewire, $action) {
                        $livewire->dispatch('stripe-payment', data: $data);

                        // Prevent the modal from closing
                        $action->halt();
                    })
            ])

->headerActions([
                CreateAction::make()
                    ->label('New subscription')
                    ->modalWidth('md')
                    ->action(function ($data, $livewire, $action) {
                        $livewire->dispatch('stripe-payment', data: $data);

                        // Prevent the modal from closing
                        $action->halt();
                    })
            ])

This is so I can have the content of my stripe payment field processed separately.

Once my stripe payment field's validation has run and is successful, I trigger this event:

Livewire.dispatch('finalize-subscription-create')

Livewire.dispatch('finalize-subscription-create')

In the listener on the PHP side, I want to close the open modal and send out a notification. I am trying:

#[On('finalize-subscription-create')]
    public function finalizeSubscriptionCreate()
    {
        $this->dispatch('close-action-modal');

        Notification::make()
            ->title('Subscription created')
            ->success()
            ->send();
    }

#[On('finalize-subscription-create')]
    public function finalizeSubscriptionCreate()
    {
        $this->dispatch('close-action-modal');

        Notification::make()
            ->title('Subscription created')
            ->success()
            ->send();
    }

The notification is sent but the modal is not closed. Can anyone advise on how to do this please?

Solution

Use something like that

->action(function ($data, $livewire, $action) {

    $modalId = str($livewire->getId())
        ->prepend('fi-')
        ->append('-action-0')
        ->toString();

    $livewire->dispatch('stripe-payment', data: $data, modalId: $modalId);

    $action->halt();
})

->action(function ($data, $livewire, $action) {

    $modalId = str($livewire->getId())
        ->prepend('fi-')
        ->append('-action-0')
        ->toString();

    $livewire->dispatch('stripe-payment', data: $data, modalId: $modalId);

    $action->halt();
})

#[On('stripe-payment')]
public function stripePayment(array $data, string $modalId): void
{
    // ...
    $this->dispatch('close-modal', id: $modalId);
}

#[On('stripe-payment')]
public function stripePayment(array $data, string $modalId): void
{
    // ...
    $this->dispatch('close-modal', id: $modalId);
}

Jump to solution

Close open modal from listener on PHP side?

Close open modal from listener on PHP side?

Similar Threads

Similar Threads

Similar Threads