Action button to edit row

[acoyco]

Hi guys, I'm currently struggling with implementing an action button to edit a row.

When i click on 'edit' should open the modal and bind the input with row data but it is not working.

I tried to implement edit($Id) method on datatable class with no luck.

Could you help me with this?

Thank you in advance.

[lrljoe]

You cannot wire directly to a Model in Livewire v3.

You'd need to create a public property for "first_name" (for example)

public ?string $first_name;

Then in "edit" set it:

$this->first_name = $driver->first_name;

Then your "wire:model" will be

wire:model='first_name'

Ideally you'd use a Livewire Form for this to separate the Form processing from the rest of your Table.
Even better - use the Wire Elements Modal package! :)

[aaroncoyco97]

Hello, this is my code now. I have separated the form processing on another component but is not the form is not populating with object data.

CustomerTable Livewire component

public function edit($driverId)
    {
        $driver = Driver::findOrFail($driverId);
        $this->driver_id = $driverId;
        $this->first_name = $driver->first_name;
        $this->last_name = $driver->last_name;
        $this->driver_license = $driver->driver_license;
    }

UpdateDriver Livewire component

class UpdateDriver extends Component
{
    public $driver_id;

    public $first_name;

    public $last_name;

    public $driver_license;

    public $customer_id;

    public function render()
    {
        return view('livewire.pages.customers.drivers.edit');
    }

    public function mount($customerId)
    {
        $this->customer_id = $customerId;
    }


    public function rules()
    {
        return [
            'first_name' => 'required|max:255',
            'last_name' => 'required|max:255',
            'driver_license' => 'required|max:255',
            'customer_id' => 'int',
        ];
    }

    public function edit($driverId)
    {
        $driver = Driver::findOrFail($driverId);
        $this->driver_id = $driverId;
        $this->first_name = $driver->first_name;
        $this->last_name = $driver->last_name;
        $this->driver_license = $driver->driver_license;
    }

    public function update()
    {
        $this->validate();
        $driver = Driver::findOrFail($this->driver_id);
        $driver->update([
            'first_name' => $this->first_name,
            'last_name' => $this->last_name,
            'driver_license' => $this->driver_license,
            'active' => true
        ]);
        $this->reset();
        $this->dispatch('refreshDatatable');
        $this->dispatch('closeEditDriverModal');
        Toaster::success(__('Driver info updated.'));
    }
}

edit.blade.php (the form with modal)

<div>
    <div wire:ignore.self id="editDriverModal" tabindex="-1" aria-hidden="true"
        class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
        <div class="relative w-full h-full max-w-2xl p-4 md:h-auto">
            <!-- Modal content -->
            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
                <!-- Modal header -->
                <div class="flex items-center justify-between p-4 border-b rounded-t md:p-5 dark:border-gray-600">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                        {{ __('Edit Driver') }}
                    </h3>
                    <button type="button"
                        class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
                        data-modal-toggle="editDriverModal">
                        <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                clip-rule="evenodd"></path>
                        </svg>
                        <span class="sr-only">Close modal</span>
                    </button>
                </div>
                <!-- Modal body -->
                <form wire:submit='update' class="p-4 md:p-5">
                    <div class="grid grid-cols-2 gap-4 mb-4">
                        <div class="col-span-2">
                            <x-label-input for="first_name" :value="__('First Name')" />
                            <x-input-text wire:model.live="first_name" id="first_name" type="text" name="first_name"
                                required autofocus autocomplete="first_name" />
                            <x-error-input :messages="$errors->get('first_name')" class="text-sm" />
                        </div>
                        <div class="col-span-2">
                            <x-label-input for="last_name" :value="__('Last Name')" />
                            <x-input-text wire:model="last_name" id="last_name" type="text" name="last_name" required
                                autofocus autocomplete="last_name" />
                            <x-error-input :messages="$errors->get('last_name')" class="text-sm" />
                        </div>
                        <div class="col-span-2">
                            <x-label-input for="driver_license" :value="__('License')" />
                            <x-input-text wire:model="driver_license" id="driver_license" type="text"
                                name="driver_license" required autofocus autocomplete="driver_license" />
                            <x-error-input :messages="$errors->get('driver_license')" class="text-sm" />
                        </div>
                    </div>
                    <button type="submit"
                        class="text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                        <svg class="w-5 h-5 me-1 -ms-1" fill="currentColor" viewBox="0 0 20 20"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
                                clip-rule="evenodd"></path>
                        </svg>
                        {{ __('Save') }}
                    </button>
                </form>
            </div>
        </div>
    </div>
    @script
        <script>
            $wire.on('closeEditDriverModal', () => {
                const modal = FlowbiteInstances.getInstance('Modal', 'editDriverModal');
                modal.hide();
            });
        </script>
    @endscript
</div>