Refresh Custom Modal Form

I have a modal that displays a custom form

->form(function (RelationManager $livewire, $record) {
                        $class = new OrdersRelationManager;
                        if(!isset($record->external_order_id)) {
                            $record = Order::find($record->id);
                            return $class->getEditForm($record);
                        } else {
                            $record = ExternalOrder::find($record->external_order_id);
                            return $class->getEditExternalOrderForm($record);
                        }
                    })

->form(function (RelationManager $livewire, $record) {
                        $class = new OrdersRelationManager;
                        if(!isset($record->external_order_id)) {
                            $record = Order::find($record->id);
                            return $class->getEditForm($record);
                        } else {
                            $record = ExternalOrder::find($record->external_order_id);
                            return $class->getEditExternalOrderForm($record);
                        }
                    })

This form displays the selections for that order. I have custom Action that allows a user to delete a selection. My question is - how can I trigger the modal to refresh the form with the updated list of selections (i.e.: remove the one that was just deleted)?

I tried using

extraAttributes

extraAttributes

and giving each selection a custom class and then using

$this->js()

$this->js()

to try and hide the entire row but that didn't work. I'd settle for triggering the modal to close and then re-open.

Solution

I was able to figure it out. I handled deleting the

selection

selection

in the form action as usual then I used

after

after

dispatching an event

Actions::make([
  Action::make('deleteSelection' . $existingSelection->id)
    ->label('Delete')
    ->color('danger')
    ->icon('heroicon-s-x-circle')
    ->action(function () use ($existingSelection) {
      $class = new OrdersRelationManager;
      $class->deleteOrderSelection($existingSelection);
    })
    ->after(function ($livewire) {
      $livewire->dispatch('refreshModal');
    }),
])

Actions::make([
  Action::make('deleteSelection' . $existingSelection->id)
    ->label('Delete')
    ->color('danger')
    ->icon('heroicon-s-x-circle')
    ->action(function () use ($existingSelection) {
      $class = new OrdersRelationManager;
      $class->deleteOrderSelection($existingSelection);
    })
    ->after(function ($livewire) {
      $livewire->dispatch('refreshModal');
    }),
])

#[On('refreshModal')]
    public function refresh(): void
    {
        // unset the form
        unset($this->cachedForms['mountedTableActionForm']);
        // reload the form
        $this->cacheForm('mountedTableActionForm', null);
    }

#[On('refreshModal')]
    public function refresh(): void
    {
        // unset the form
        unset($this->cachedForms['mountedTableActionForm']);
        // reload the form
        $this->cacheForm('mountedTableActionForm', null);
    }

Jump to solution

Refresh Custom Modal Form

I have a modal that displays a custom form

->form(function (RelationManager $livewire, $record) {
                        $class = new OrdersRelationManager;
                        if(!isset($record->external_order_id)) {
                            $record = Order::find($record->id);
                            return $class->getEditForm($record);
                        } else {
                            $record = ExternalOrder::find($record->external_order_id);
                            return $class->getEditExternalOrderForm($record);
                        }
                    })

->form(function (RelationManager $livewire, $record) {
                        $class = new OrdersRelationManager;
                        if(!isset($record->external_order_id)) {
                            $record = Order::find($record->id);
                            return $class->getEditForm($record);
                        } else {
                            $record = ExternalOrder::find($record->external_order_id);
                            return $class->getEditExternalOrderForm($record);
                        }
                    })

extraAttributes

extraAttributes

and giving each selection a custom class and then using

$this->js()

$this->js()

to try and hide the entire row but that didn't work. I'd settle for triggering the modal to close and then re-open.

Solution

I was able to figure it out. I handled deleting the

selection

selection

in the form action as usual then I used

after

after

dispatching an event

Actions::make([
  Action::make('deleteSelection' . $existingSelection->id)
    ->label('Delete')
    ->color('danger')
    ->icon('heroicon-s-x-circle')
    ->action(function () use ($existingSelection) {
      $class = new OrdersRelationManager;
      $class->deleteOrderSelection($existingSelection);
    })
    ->after(function ($livewire) {
      $livewire->dispatch('refreshModal');
    }),
])

Actions::make([
  Action::make('deleteSelection' . $existingSelection->id)
    ->label('Delete')
    ->color('danger')
    ->icon('heroicon-s-x-circle')
    ->action(function () use ($existingSelection) {
      $class = new OrdersRelationManager;
      $class->deleteOrderSelection($existingSelection);
    })
    ->after(function ($livewire) {
      $livewire->dispatch('refreshModal');
    }),
])

#[On('refreshModal')]
    public function refresh(): void
    {
        // unset the form
        unset($this->cachedForms['mountedTableActionForm']);
        // reload the form
        $this->cacheForm('mountedTableActionForm', null);
    }

#[On('refreshModal')]
    public function refresh(): void
    {
        // unset the form
        unset($this->cachedForms['mountedTableActionForm']);
        // reload the form
        $this->cacheForm('mountedTableActionForm', null);
    }

Jump to solution

Refresh Custom Modal Form

Refresh Custom Modal Form

Similar Threads

Similar Threads

Similar Threads