Livewire not sending Ajax as model is changed

Ajax is not being sent as I change the form field - it does change when I click on an element, tearing my face off trying to figure this out!

Just so you all get the full picture: ( the @livewire scripts and js are not needed in the layout as they are already included)

// the route
Route::get('/pricing', function() {
    return view('guest.pricing');
})->name('guest.pricing');

// /resources/views/guest/pricing.blade.php
<x-test-layout>

    @livewire('contact-form')

</x-test-layout>

// /resources/layouts/test.blade.php

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

	<meta charset="utf-8">

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<meta name="csrf-token" content="{{ csrf_token() }}">

	<title>{{ config('app.name', 'Laravel') }}</title>

	<link href="https://fonts.bunny.net" rel="preconnect">

	<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

	@vite(['resources/css/app.css', 'resources/js/app.js'])

</head>

    <body>

        {{ $slot }}

    </body>

</html>

// /resources/views/livewire/contact-form.blade.php
<div>

    <div class="block w-full border border-gray-200 px-4 py-3 text-sm">Name = {{ $name }}</div>

    <input type="text" wire:model='name' class="block w-full border border-gray-200 px-4 py-3 text-sm">

        <h1>{{ $count }}</h1>

        <button wire:click="increment">+</button>

        <button wire:click="decrement">-</button>

        <input type="text" wire:model="count" class="block w-full border border-gray-200 px-4 py-3 text-sm">


</div>

// /app/livewire/ContactForm.php

<?php

namespace App\Livewire;

use Livewire\Component;
// use Illuminate\Support\Facades\Mail;
// use Illuminate\Support\Facades\Log;
// use App\Mail\ContactFormMailable;


class ContactForm extends Component
{

    public $name;

    public $count = 1;

    public function increment()
    {
        $this->count++;
    }

    public function decrement()
    {
        $this->count--;
    }

    public function render()
    {
        return view('livewire.contact-form');
    }
}

So as I said, everything actually works except the ajax calls as I change the model - SO, in the actual contact form live validation does not work. If I change the name field here and click the counter buttons the name will be displayed - like Livewire is now deferring ajax requests by default??

Did that happen - does livewire now defer ajax by default???

Snapey

2 years ago

Best Answer

Level 122

if using livewire3 by default, input changes are not sent immediately. You can change this behaviour with one if the modifiers

https://livewire.laravel.com/docs/forms#live-updating-fields

SeanKimball

2 years ago

Level 2

@Snapey HA! .... So I missed the "new version memo" by 2 weeks. Looks like I have a bunch more docs to read :)

Actually, the clearest answer is in the upgrade docs... https://livewire.laravel.com/docs/upgrading#wiremodel

wire:model

In Livewire 3, wire:model is "deferred" by default (instead of by wire:model.defer). To achieve the same behavior as wire:model from Livewire 2, you must use wire:model.live.

Please or to participate in this conversation.