Filament•14mo ago

Dispatching Event after Action

Hi guys, I added a PriceAssistantAction class to my application which is used at a specific tab in my ContractResource while editing a contract. The action itself is working perfectly fine, I just noticed one issue: When I call $livewire->dispatch('$refresh') in after(), the application does not refresh the user interface.

25 Replies

alexanderkroneisOP•14mo ago

alexanderkroneisOP•14mo ago

Any ideas? 🙂

Patrick Boivin•14mo ago

Not sure, but try protected $listeners = ['myRefresh' => '$refresh']; And then dispatch myRefresh instead of $refresh

alexanderkroneisOP•14mo ago

$refresh is working in other places of the application. :/ My current assumption is that $livewire->dispatch('$refresh') is accessing another Livewire component

wyChoong•14mo ago

were this working for v2? https://laravel-livewire.com/docs/2.x/actions#magic-actions if not mistaken I stumbled to this not long ago in v3, this doesn't seem to be supported anymore, as it is not documented in v3

Patrick Boivin•14mo ago

If you dd($livewire), do you get the expected result? (I'm guessing the Page class) Good point, it's possible... I'm using it only on a v2 project atm

wyChoong•14mo ago

can't be sure thou, because in the v3 project that i upgraded is not fully tested yet it seems to be working i think i recalled it, $listeners is not documented in v3, but still supported, the example you shown is working and I'm using it the issue I had is in v3 doc it wasnt clear how we should trigger $refresh as the doc is focused on using php attributes #[On]

alexanderkroneisOP•14mo ago

I never worked with v2, so I can't say tbh Yes, same for me.

wyChoong•14mo ago

so is your question answered?

alexanderkroneisOP•14mo ago

dd($livewire) is returning the correct component. :/ Well, not really. 😅 I still don't know how to refresh the UI since it's not documented anywhere. $refresh is also not mentioned in the upgrade guide of Livewire itself

wyChoong•14mo ago

// add this to the page class
protected $listeners = ['myRefresh' => '$refresh'];

// in your action
Action::make('action')
...
->after(fn($livewire) => $livewire->dispatch('myRefresh));

// add this to the page class
protected $listeners = ['myRefresh' => '$refresh'];

// in your action
Action::make('action')
...
->after(fn($livewire) => $livewire->dispatch('myRefresh));

can you try this?

alexanderkroneisOP•14mo ago

Sure, one moment. It did not refresh. 😅

wyChoong•14mo ago

ok now I recall x2 what was the issue LOL the $refresh doesn't seems to be supported anymore, hence not documented, not sure why not mentioned in upgrade guide, maybe you should submit a discussion at livewire repo so the for this i workaround in my app in this way

// the action
Actions\Action::make('test')
  ...
  ->after(fn ($livewire) => $livewire->dispatch('myRefresh')),

// in your livewire page
#[On('myRefresh')]
public function refresh()
{
    // here should run whatever you want to refresh/recalculate for the page
    // for example an Edit form
    $this->fillForm();
}

// the action
Actions\Action::make('test')
  ...
  ->after(fn ($livewire) => $livewire->dispatch('myRefresh')),

// in your livewire page
#[On('myRefresh')]
public function refresh()
{
    // here should run whatever you want to refresh/recalculate for the page
    // for example an Edit form
    $this->fillForm();
}

don't quote me if it breaking changes in future 😂

alexanderkroneisOP•14mo ago

$refresh is working in other places of the same application. I'll just finish my current thing and I'll show you another example where it's working 🙂

wyChoong•14mo ago

added as todo for me to check everywhere in my app LOL

alexanderkroneisOP•14mo ago

e.g.

Tables\Actions\AttachAction::make()
    ->recordSelectOptionsQuery(fn($livewire, Builder $query) => $query->whereBelongsTo($livewire->ownerRecord->hotel))
    ->preloadRecordSelect()
    ->after(fn ($livewire) => $livewire->dispatch('$refresh')),

Tables\Actions\AttachAction::make()
    ->recordSelectOptionsQuery(fn($livewire, Builder $query) => $query->whereBelongsTo($livewire->ownerRecord->hotel))
    ->preloadRecordSelect()
    ->after(fn ($livewire) => $livewire->dispatch('$refresh')),

this is in RoomsRelationManager.php After I attach a room the page is refreshed, let me provide a screencast You can see the issue and the working example in one video: "Saisonassistent" is not refresh the page after submitting, but added a room via the relation manager is refreshing.

alexanderkroneisOP•14mo ago

https://app.screencast.com/VEVtPIZnQ4FhY

alexander.gaal

TechSmith Screencast

2023-10-12_18-35-30

World's leading screen capture + recorder from Snagit + Screencast by Techsmith. Capture, edit and share professional-quality content seamlessly.

wyChoong•13mo ago

and this $livewire is the page or the relation manager?

alexanderkroneisOP•13mo ago

Good question, let me check

  #__name: "app.filament.resources.contract-resource.relation-managers.rooms-relation-manager"

  #__name: "app.filament.resources.contract-resource.relation-managers.rooms-relation-manager"

so that's different from the actions 🤔 isn't dispatch dispatching the event through the whole application? 🤔

wyChoong•13mo ago

yes it is i think i have an answer for this the form are filled in mount and this is only called once for the component, hence it is not refreshed when you dispatch $refresh what you are seeing refreshed are form schema, not the content thus your tabs are refreshed so my question will be, is there any console errors in your browser? should the fields in the new tabs contains data and is it filled correctly? and is the form submittable? can you try on this after the RM dispatched $refresh and without reloading your browser

alexanderkroneisOP•13mo ago

I‘ll check that tomorrow. I‘m out for today 💭 The form is not submittable, FYI. so I've to find another solution :/

morty•8mo ago

Did you ever find a solution? Having the exact same issue. nvm, I solved it here: https://discord.com/channels/883083792112300104/1220475763711676496/1220760210340057119

Gaming

Programming

Dispatching Event after Action