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();
    }
}

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>

<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);
            });
    }
}

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>

<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>

404 after dispatch livewire event

Resource Custom page

custom-page-list

Livewire component

post-processing

Similar Threads

Similar Threads

Similar Threads