How to refresh the data inside the dataTable after I store new data and close the modal?

[anonymouse703]

I have three components

1. the Parent component for my list view
2. the Form Component
3. and lastly the dataTable

This is the structure of my components

<div class="card-body">
      <livewire:discount-table />
  </div>
  
  
  <!-- The Modal -->
    <div wire.ignore.self class="modal fade" id="discountModal" tabindex="-1" role="dialog" aria-labelledby="discountModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document">
            <livewire:discount.discount-form />
        </div>
    </div>

What I want is after I store new data and close the modal the new sets of data will display in the dataTable. This my current code in storing and closing the modal

 public function store()
   {

       $action = '';

       $data = $this->validate([
           'discount' => 'required',
       ]);
       if ($this->discountId) {
           Discount::find($this->discountId)->update($data);
           $action = 'edit';
       } else {
           Discount::create($data);
           $action = 'store';
       }
       $this->emit('showEmitedFlashMessage', $action);
       $this->resetInputFields();
       $this->emit('closeDiscountModal');
       $this->emit('refreshParentDiscount');
       // I want to fire the refresh event here to display new set of data but don't know how
   }

[luanfreitasdev]

Hello. Does that solve?

#530

[anonymouse703]

@luanfreitasdev not yet sir... I tried the below code by calling the event after I close the modal but still not working.

$this->emit('pg:eventRefresh-');

Is their any way to call an event to refresh the data in the dataTable?

[anonymouse703]

@luanfreitasdev I already solve this... instead of copying the default event I created my own event and trigger it after the modal closed.

 protected function getListeners(): array
    {
        return array_merge(
            parent::getListeners(),
            [
                'refreshTable'   => '$refresh',
            ]
        );
    }

Though I have another question in different thread

[rosolovsky]

Hello. I use Wire Elements Modal component and in my case in modal component function update is such as below:

public function update() {
        $this->category->save(); 
        $this->closeModalWithEvents([
            $this->emit('pg:eventRefresh-default')
        ]);
    }

This solution work good for PowerGrid and Wire Elements Modal component.