Livewire - Ajax not being fired

0
votes

I have a Laravel Livewire component, and Ajax events are not being fired.

enter image description here

I have a search input file that sends a search string to my component. No Ajax events are being fired, and the results don't get updated.

Note: the pagination Livewire control also doesnt work - Laravel pagination does work, but when I use the UsePagination trait then pagination doesn't work. There aren't any network calls, and no Javascript errors.

Blade component:

<input type="text" class="min-w-full" placeholder="Search" wire:model="search" />

Component:

  public function render()
    {
        return view('livewire.manage-sites', [
            'sites' => app(WebsiteRepository::class)->query()->where('organization_name', 'like', '%' . $this->search . '%')->paginate(10),
        ])->extends('layouts.management');

    }

Styles are included in the base layout page:

<livewire:styles />

and the scripts are included in the body:

<body>
    @yield('body')

    <livewire:scripts />
    <script src="{{ url(mix('js/app.js')) }}"></script>

    @stack('scripts')

</body>

The component is being included through a route definition in the web.php.

Route::get('manage-sites', \App\Http\Livewire\ManageSites::class)
        ->name('manage.sites.index');

Relevant pieces of composer:

"php": "^7.2.5",
"blade-ui-kit/blade-ui-kit": "^0.1.1",
"fideloper/proxy": "^4.2",
"fruitcake/laravel-cors": "^2.0",
"guzzlehttp/guzzle": "^6.3",
"hyn/multi-tenant": "^5.6",
"laravel-frontend-presets/tall": "^1.7",
"laravel/framework": "^7.24",
"laravel/tinker": "^2.0",
"league/flysystem-aws-s3-v3": "^1.0",
"livewire/livewire": "^2.0",
"sentry/sentry-laravel": "^1.8",
"spatie/laravel-activitylog": "^3.14",
"spatie/laravel-medialibrary": "^8.0.0",
"spatie/laravel-permission": "^3.16"
3
laravellaravel-livewire
Can you clarify? The ajax search input is not working when you type something? – tonoslfx
Can you show us how you're accessing this livewire component and more content about your blade view and Livewire component? – Clément Baconnier
@tonoslfx correct - the search isnt working and no network requests are made. – sbkrogers

3 Answers

1
votes

You're calling javascript with the wrong path

<script src="{{ url(mix('js/app.js')) }}"></script>

  • url('app.js') will give you the full url http://localhost/ressource.js
  • mix('app.js') will give you the full url with the appropriate hash http://localhost/ressource.js?id=1964becbdd96414518cd

Using both may give you a weird url. I recommend to uses mix since it will version your JS and avoid you troubles of cache in production.

<script src="{{ mix('js/app.js') }}"></script>
1
votes

I was able to get this to work by moving the table/search/pagination out of the main blade component, into a new Livewire component and then referencing in the main blade component as below.

<livewire:list-sites />
0
votes

You are missing an action keydown to trigger the search.

<input type="text" class="min-w-full" placeholder="Search" 
wire:model="keyword" 
wire:keydown.debounce.350ms="search" />

// wire:keydown.debounce.350ms delays by 350ms

In your Livewire Search Controller

public function search() {

 // $this->keyword;
 // your eloquent search query

}