Refresh Livewire Page

Hello, I have a problem with my Livewire component after a bulk delete. Here is part of the component:

public $client_id; 
public $showExtensionsModal = false;
public $showDeleteModal = false;
public $selected = [];

protected $listeners =['refreshExtensions' => '$refresh'];

public function deleteSelected()
    {
        $deleteCount = count($this->selected);
        $extensions = AccountUser::whereKey($this->selected);
        $extensions->delete();

        $this->showDeleteModal = false;
        $this->emit('refreshExtensions');
        $this->notify(['success','Successfully Deleted '.$deleteCount.' Extensions']);
        $this->reset('selected');
    }

On that blade component I have a child livewire component to upload a CSV file and I need to pass the "client_id" value to store it on the DB. Here is how it looks like:

<div>
<x-dropdown label="Bulk Actions">
   <x-dropdown.item type="button" wire:click="exportSelected" class="flex items-center space-x-2">
       <x-icon.download class="text-gray-400" /> <span>Export</span>
   </x-dropdown.item>
   
   <x-dropdown.item type="button" wire:click="$toggle('showDeleteModal')"
                            class="flex items-center space-x-2">
       <x-icon.trash class="text-gray-400" /> <span>Delete</span>
   </x-dropdown.item>
</x-dropdown>

<livewire:modals.import-extensions :clientID="$client_id" />

<!-- Table -->
// Code Here

<!-- Delete Extension Modal -->
// Code Here

<!-- Add/Edit Extension Modal -->
// Code Here

</div>

If I click on my upload button and run the process to upload a CSV file, everything works fine. The problem is after I do a bulk delete. If after I delete some records the next thing I do is try to upload a file, for some reason the "client_id" value is NULL. This means that the import process will fail. I have to do a full page reload on my browser (CTL-R) and then try again. then it will work.

So, I was wondering how can I force a full page reload after the bulk delete? I tried with the "$refresh" option doing an "emit" or "emitSelf", but that seems to be doing nothing.

Thanks.

Snapey

5 years ago

Level 122

I would remove the reset statement, and replace with $this->selected = []; This way there is no chance that you are clearing $this->client_id;

Also remove the listener in the main component. It will automatically re-render its own view.

fanpero87

5 years ago

Level 11

Hello, Thanks for the answer. I tried that but still doesn't work. I also tried to add a "reset page" but nothing. Here is how the delete method looks like:

public function deleteSelected()
    {
        $deleteCount = count($this->selected);
        $extensions = AccountUser::whereKey($this->selected);
        $extensions->delete();

        $this->showDeleteModal = false;
        $this->notify(['success','Successfully Deleted '.$deleteCount.' Extensions']);
        $this->selected = [];
        $this->resetPage();
    }

If I Import extensions, then delete extensions and then try to import more extensions is when I have the problems.

It seems to me that I have to do a full page refresh after this but I just don't know how.

Please or to participate in this conversation.