Laravel Livewire wire:click not trigger function defined

Question

I am building a search bar within a webpage. Ideally, user would enter the search text in the search field, and then if there are records found, a search results table would show and display the record found. I am using Laravel Livewire to implement this feature, however, I ran into the problem that the wire:click not firing the event, and any help would be needed!

This is my blade file (resources/livewire/dashboard.blade.php) contains the search bar:

<form>
    <label for="searchText" class="block text-xx font-medium text-gray-700">Search Users</label>
    <div class="mt-1 flex rounded-md shadow-sm">
        <div class="relative flex items-stretch flex-grow focus-within:z-10">
            <input type="text" name="searchText" id="searchText"
                       class="focus:ring-indigo-500 focus:border-indigo-500 block w-full rounded-none rounded-l-md pl-10 sm:text-sm border-gray-300" placeholder="User ID / Email Address / Mobile Number"
                       wire:model="searchText">
        </div>
        <button wire:click="search()" class="-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium rounded-r-md text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
            Search
        </button>
    </div>
</form>

and this is the action defined in the App/Http/Livewire/Dashboard.php file

<?php

namespace App\Http\Livewire;

use Illuminate\Support\Facades\Http;
use Livewire\Component;

class Dashboard extends Component
{
    public $stats, $searchText;
    public $showResultsTable = false;
    protected $accountAPIRootURL = 'https://example.com/api/v2/';

    public function render()
    {
        $response = Http::withHeaders([
            'Accept' => 'application/json'
        ])->get($this->accountAPIRootURL . 'statistics/overview');

        if ($response->successful()) {
            $stats = $response['data'];
        } else {
            $stats = [
                'total_users' => 0,
                'new_users' => 0,
                'invitations' => 0,
                'new_invitations' => 0,
                'requests' => 0,
                'new_requests' => 0
            ];
        }

        $this->stats = $stats;
        $this->searchText = '';
        return view('livewire.dashboard');
    }

    public function search()
    {
        $response = Http::withHeaders([
            'Accept' => 'application'
        ])->get($this->accountAPIRootURL . 'admin/search', [
            'searchText' => $this->searchText
        ]);

        if ($response->successful()) {
            $this->showResultsTable = true;
            $this->searchText = '';
        }
    }
}

This is my template.blade.php file, where the @livewire component is called

@extends('layouts.app')

@section('content')
   @livewire('dashboard')
@endsection

I am not worrying too much about displaying the result table now because it seems like the search() function is not being triggered when I click on the Search button within the blade. How do I know that, I put a dd() within the search() function and it is not being executed.

I would appreciate any help!

The issue is already fixed

Jacky.S
– Jacky.S

2021-03-26 15:26:20 +00:00
Commented Mar 26, 2021 at 15:26 — Jacky.S
– Jacky.S, Commented Mar 26, 2021 at 15:26

Prospero · Accepted Answer · 2021-03-25 13:33:32Z

0

You don't need to use the parenthesis, wire:click="search"

UPDATE: Try this different syntax while you are handle a form in livewire

<form wire:submit.prevent="search">
    //.....
    <div class="mt-1 flex rounded-md shadow-sm">
        //.....
        <button class="-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium rounded-r-md text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
            Search
        </button>
    </div>
</form>

edited Mar 25, 2021 at 13:33

answered Mar 24, 2021 at 21:54

Prospero

2,3922 gold badges6 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Prospero Over a year ago

Be sure that your blade is loading the @livewire assets, check in DevTool Console for any issue and Network tab if the request is being send to backend

Jacky.S Over a year ago

I have @livewireStyles and @livewireScripts in the layouts/app.blade.php, within the app.blade.php, I have a section yield('content'), and I have another file called template.blade.php to implement the content section, within @section('content'), i have @livewire('dashboard') which contains the code pasted above in the question

Prospero Over a year ago

So, when you inspect your dashboard blade html you can see loaded assets? Any issue in console? For instance, put the button inside div

Jacky.S Over a year ago

I did see app.css and app.js loading, I also see livewire.js loading, anything else I need to look for. When you say add a button inside <div>, anything I should do to the button and any outcomes should i expect to see?

Prospero Over a year ago

See in Answer update, try that different form handle function. Let me know results

|

Collectives™ on Stack Overflow

Laravel Livewire wire:click not trigger function defined

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related