WallyJ
1 week ago
125
4
Laravel

Livewire Not Refreshing Data After Wire:Change

Posted 1 week ago by WallyJ

I have some task list functionality that works, except for the AJAX functionality.

The checkbox checks. It changes the value in the DB. And if I refresh the page the correct CSS is applied to show the text with a strikethrough.

The expected behavior is all of the above, with the addition of the strikethrough happening immediately after clicking the checkbox.

I am using Livewire version 0.7.4 and have updated my code to convert @livewireAssets to @livewireStyles/@livewireScripts as instructed in the release documentation back at version 0.6.0.

Here is the code for my checkbox:

<ul class="list-group">
    @foreach($this->tasks as $task)
        <li class="list-group-item d-fleex-justify-content-between align-items-center">
            <div>
                <input type="checkbox" wire:click="toggleTask({{$task->id}})" class="mr-4" {{ $task->taskcomplete ? 'checked' : '' }}>
                <span class="{{ $task->taskcomplete ? 'completed' : '' }}">
                    {{ Carbon\Carbon::createFromDate($task->taskduedate)->format('m-d-Y') }}: <a href="/contacts/{{ $task->deal->contact->id }}">{{ $task->deal->contact->contact1lastname }}</a> - {{ $task->tasktext }} - {{ $task->deal->dealtype }}
                </span>
            </div>
        </li>
    @endforeach
</ul>

And here is my Livewire controller file:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Task;

class Alltasks extends Component
{
    public $id;
    public $tasks;
    public $contacts;
    public $tasktext;
    public $taskduedate;

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

    public function render()
    {
        return view('livewire.alltasks');
    }

    public function toggleTask($id)
    {
        $task = Task::find($id);

        $task->taskcomplete = !$task->taskcomplete;
        $task->save();
    }
}

I got most of this code from the following YouTube tutorial (which is very good I might add): https://www.youtube.com/watch?v=fhKcI3HAP98

Just not sure why the AJAX portion of the change to my page is not working correctly.

I will say that my setup runs quite slow because I am running Laragon on a USB drive which is painfully slow. Not sure if any timeouts are occurring from an AJAX perspective within Livewire.

Please sign in or create an account to participate in this conversation.