Question 245678 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – Is it possible to make a Filament (version 2) Action reactive?

Can I get a Filament (v2) Action to refresh the whole page, or at least update a Navigation Badge?

I’ve got a table of Recipes, and I’ve got a Single Action on that recipe table, which adds the recipe to a Menu.

And i’ve got a Resource for the Menu, which has a Navigation Badge which shows the number of Recipes in that Menu.

But when I click the Action to add a Recipe to the Menu, it doesn’t immediately update the Navigation Badge. I have to refresh the page in the browser to see the updated Navigation Badge.

Is there some way I can get the Action to be Reactive, so that it updates the whole page? Or even a way to get the Action to trigger a refresh on the Nav Badge?

Tags:

2

Answers


  1. 0

    You can add redirect to action

        class CreateProduct extends CreateRecord
{
    protected static string $resource = ProductResource::class;

    protected function getRedirectUrl(): string
    {
        return $this->getResource()::getUrl('index');
    }
}

    or you can use livewire (lifecycle hooks )

    https://filamentphp.com/docs/2.x/admin/resources/editing-records#lifecycle-hooks

    it will look like this

     ->actions([
                TablesActionsEditAction::make()
                    ->after(function (Component $livewire) { 
                        $livewire->dispatch('refreshProducts');
                    }),

    we need to listen for the event and refresh the page. (in editFileName.php )

    use LivewireAttributesOn;
 

    class EditProduct extends EditRecord
    {
        // ...
     
        #[On('refreshProducts')]
        public function refresh(): void
        {
        }
    }
    Login or Signup to reply.
  2. 0

    First you need to define a Filament Action with a callback function that runs after the action is executed.
    In the callback function:
    To refresh the whole page, use location.reload(true);.
    To update the Navigation Badge, manipulate the DOM to change its content.

    for example:

    Filament.addAction('addRecipeToMenu', {
  label: 'Add to Menu',
  handler: async (record) => {
    // Your code to add the recipe to the menu
    // ...

    // Call the callback function after the action is executed
    return { callback: 'refreshPageOrUpdateBadge' };
  },
});

Filament.addCallback('refreshPageOrUpdateBadge', () => {
  // Refresh the page or update the Navigation Badge here
  // Example 1: Refresh the page
  location.reload(true);

  // Example 2: Update the Navigation Badge (replace 'badgeId' with the actual HTML element ID)
  const badgeElement = document.getElementById('badgeId');
  if (badgeElement) {
    // Update the badge content based on the updated count
    // badgeElement.innerText = updatedCount;
  }

});

    Replace ‘badgeId’ and ‘updatedCount’ with your specific IDs and values

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search