CODEWITHSUNDEEP
phplaravellaravel-livewirelivewires
Jacky.S
Jacky.S

Reputation: 404

Laravel Livewire wire:click not trigger function defined

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!

Upvotes: 0

Views: 1703

Answers (1)

Prospero
Prospero

Reputation: 2352

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>

Upvotes: 0

Related Questions