Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Blear's avatar
Level 1

After pressing the buttons/calling the livewire function, the component partially disappears

After pressing the edit, delete or add(not the one in the placed component but in the form), button, the table component disappears and only the Add button remains, which cannot be pressed.

class AddressIndex extends Component
{
    public $street;
    public $country;
    public $city;
    public $zip_code;
    public $addresses;
    public $building_number;

    public $id;

    public function mount()
    {
        $this->addresses = Address::where('is_active', 1)->get();
    }

    public function editRow($id)
    {
        $this->id = $id;
        $this->loadEdit();
    }

    public function loadEdit()
    {
        $this->selectedAddress = Address::find($this->id);

        $this->street = $this->selectedAddress->street;
        $this->country = $this->selectedAddress->country;
        $this->city = $this->selectedAddress->city;
        $this->zip_code = $this->selectedAddress->zip_code;
        $this->building_number = $this->selectedAddress->building_number;
        $this->dispatch('openEditModal');
    }

    public function deleteRow($id)
    {
        $address = Address::find($id);

        if (!$address) {
            // return redirect()->route('addresses.index')->with('error', 'Adres nie został znaleziony.');
            return response()->json(['message' => 'Adres nie został znaleziony.']);
        }
        if ( $address->is_active==false) {
            $address->is_active=true;
            $address->save();
            // return redirect()->route('addresses.index')->with('success', 'Adres został pomyślnie aktywowany.');
            return response()->json(['message' => 'Adres został pomyślnie aktywowany.']);
        }
        $address->is_active=false;
        
        
        $address->save();
        $this->mount();
        $this->render();

        // return redirect()->route('addresses.index')->with('success', 'Adres został pomyślnie usunięty.');
        // return response()->json(['message' => 'Adres został pomyślnie usunięty.']);
    }
    
    public function create()
    {
        $validated = $this->validate([ 
            'street' => 'required|string',
            'country' => 'required|string',
            'zip_code' => 'required|string|size:5',
            'city' => 'required|string',
            'building_number'=> 'required'
        ]);
 
        $adres = Address::create($validated);
        // $this->redirect('/addresses');
        $this->mount();
        $this->render();
    }
    public function render()
    {
        // Trzeba zmienić render w controlerze ale nie generuje się tablica
        return view('livewire.addresses.index');
    }
}

blade template:


<div class="h-full">
<button onclick="my_modal_3.showModal()" class="btn btn-primary">Add</button>
    <dialog id="my_modal_3" class="modal w-auto">
  <div class="modal-box">
    <form method="dialog">
      <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
    </form>
    <!-- Zmodyfikować w zależności od url -->
    @include('addresses.add')
  </div>
</dialog>
<dialog id="my_modal_4" class="modal w-auto">
<div class="modal-box">
    <form method="dialog">
      <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
    </form>
    <!-- Zmodyfikować w zależności od url -->
    @include('addresses.add')
  </div>
</dialog>
<div id="myGrid" style="height: calc(100% - 2.5rem);" class="ag-grid ag-theme-quartz"></div>
@script
<script>
$wire.on('openEditModal', () =>  my_modal_4.showModal());
</script>
@endscript
<script>
    
        
        let gridApi;
        var filterParams = {
            maxNumConditions: 1,
            comparator: (filterLocalDateAtMidnight, cellValue) => {
                var dateAsString = cellValue;
                if (dateAsString == null) return -1;
                var dateParts = dateAsString.split('/');
                var cellDate = new Date(
                Number(dateParts[2]),
                Number(dateParts[1]) - 1,
                Number(dateParts[0])
                );

                if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) {
                return 0;
                }

                if (cellDate < filterLocalDateAtMidnight) {
                return -1;
                }

                if (cellDate > filterLocalDateAtMidnight) {
                return 1;
                }
                return 0;
            },
        };

        window.onload = function() {
            // Grid Options: Contains all of the grid configurations
            const gridOptions = {
                rowData: {!! $dane !!},
                
                // Column Definitions: Defines & controls grid columns.
                columnDefs: [
                    @foreach($columns as $index => $column)
                        { field: "{{ $column }}" },
                    @endforeach
                 {
            headerName: 'Options',
            field: 'id', 
            cellRenderer: function(field) {
                var div = document.createElement('div');
                div.id = 'gridButtons_' + field.value;
                div.innerHTML = `<div wire:key="${field.value}" id="option_${ field.value}"><button class="btn btn-primary h-min" wire:click="editRow(${ field.value})">Edit</button><button class="btn btn-error h-min" wire:click="deleteRow(${ field.value})"  wire:confirm="Na pewno usunąć?">Delete</button></div>`;
                return div;
    }
        },
                
                        
                    
                ],
                defaultColDef: {
                    flex: 1,
                    filter: true,
                },
                components: {
                            btnCellRenderer: BtnCellRenderer
                },
            };
            // Your Javascript code to create the grid
            const myGridElement = document.querySelector('#myGrid');
            gridApi = Grid(myGridElement, gridOptions);
        };
        
        </script>
</div>

0 likes
0 replies

Please or to participate in this conversation.