Filament•3mo ago

404 after dispatch livewire event

Hello Community. I created a custom page for the post resource, for processing images. To delete images I created a filament action in the livewire component, and then dispatch the delete function which is on the custom page. I followed the structure described in the livewire docs - https://livewire.laravel.com/docs/nesting#listening-for-events-from-children But when trying to delete an image, a 404 error occurs. It seems that after deletion, a return to the livewire component occurs, which no longer exists. Please help me to fix this error. Thanks in advance. My code: Resource Custom page

class CustomPageList extends Page
{
    use InteractsWithRecord;

    protected function getViewData(): array
    {
        return ['items' => $this->record->media()->get()];
    }

    #[On('delete-media')]
    public function deleteMedia(int $mediaId): void
    {
        Media::find($mediaId)->delete();
    }
}

class CustomPageList extends Page
{
    use InteractsWithRecord;

    protected function getViewData(): array
    {
        return ['items' => $this->record->media()->get()];
    }

    #[On('delete-media')]
    public function deleteMedia(int $mediaId): void
    {
        Media::find($mediaId)->delete();
    }
}

custom-page-list

<x-filament-panels::page>
  <div>
      @foreach ($items as $key => $item)
          @livewire(\App\Livewire\PostProcessing::class, ['image' => $item], key($item->id))
      @endforeach
  </div>
</x-filament-panels::page>

<x-filament-panels::page>
  <div>
      @foreach ($items as $key => $item)
          @livewire(\App\Livewire\PostProcessing::class, ['image' => $item], key($item->id))
      @endforeach
  </div>
</x-filament-panels::page>

Livewire component

class PostProcessing extends Component implements HasActions, HasForms
{
    use InteractsWithActions;
    use InteractsWithForms;

    public Media $image;

    public function deleteImageAction(): Action
    {
        return Action::make('deleteImage')
            ->requiresConfirmation()
            ->action(function () {
                // dispatch event to filament custom page
                $this->dispatch('delete-media', $this->image->id);
            });
    }
}

class PostProcessing extends Component implements HasActions, HasForms
{
    use InteractsWithActions;
    use InteractsWithForms;

    public Media $image;

    public function deleteImageAction(): Action
    {
        return Action::make('deleteImage')
            ->requiresConfirmation()
            ->action(function () {
                // dispatch event to filament custom page
                $this->dispatch('delete-media', $this->image->id);
            });
    }
}

post-processing

<div>
    <x-filament-actions::group
        :actions="[$this->deleteImageAction]"
        dropdown-placement="bottom-end"
        icon="heroicon-o-pencil-square"
    />
    <x-filament-actions::modals />

  <img src="{{ $image->getUrl() }}" />
</div>

<div>
    <x-filament-actions::group
        :actions="[$this->deleteImageAction]"
        dropdown-placement="bottom-end"
        icon="heroicon-o-pencil-square"
    />
    <x-filament-actions::modals />

  <img src="{{ $image->getUrl() }}" />
</div>

6 Replies

TonyOP•3mo ago

everything works properly when I remove ->requires Confirmation() . but how can I keep it? 😵‍💫

Bruno Pereira•3mo ago

try putting the requiresConfirmation after the action.

TonyOP•3mo ago

it didn't help. it looks like the problem is in close-modal. it tries to close the modal that has already been removed along with the livewire component.

Bruno Pereira•3mo ago

what about

use Livewire\Component;

->action(fn (Component $livewire) => $livewire->dispatch('delete-media', $this->image->id))

use Livewire\Component;

->action(fn (Component $livewire) => $livewire->dispatch('delete-media', $this->image->id))

TonyOP•3mo ago

nope. i think i need to delete close-modal from dispatches. but cant find a way to do that

Bruno Pereira•3mo ago

damn. Good luck then.

Gaming

Programming

404 after dispatch livewire event

Did you find this page helpful?