Hello,
In laravel 7 with livewire 1.3 I make listing of data with filter text
input(it has wire:model.lazy defined) and “Search” button and I need to run search when
“Search” button is clicked.
But search is run when text input lose focus without clicking on “Search” button.
I have a component app/Http/Livewire/Admin/Facilities.php:
<?php
namespace App\Http\Livewire\Admin;
use App\library\CheckValueType;
use App\Settings;
use DB;
use Illuminate\Validation\Rule;
use Livewire\Component;
use App\Facility;
use Livewire\WithPagination;
class Facilities extends Component
{
use WithPagination;
public $form= [
'name'=>'',
'descr'=> '',
'created_at'=> ''
];
public $current_facility_id;
public $filter_name;
public $updateMode = 'browse';
public function render()
{
\Log::info( '-1 Facilities $this->filter_name ::' . print_r( $this->filter_name, true ) );
// when text input lose focus I see tracing code above is added to log
$facility_rows_count = Facility
::getByName($this->filter_name, true)
->count();
$backend_per_page = Settings::getValue('backend_per_page', CheckValueType::cvtInteger, 20);
$this->emit('facility_opened', [ 'mode'=>'browse', 'id'=>null ] );
return view('livewire.admin.facilities.container', [
'facilityDataRows' => Facility
::orderBy('created_at', 'desc')
->getByName($this->filter_name, true)
->paginate($backend_per_page),
'facility_rows_count'=> $facility_rows_count
]);
}
and in resources/views/livewire/admin/facilities/container.blade.php :
<div>
@inject('viewFuncs', 'App\library\viewFuncs')
<div class="page_content">
@include('livewire.common.alert_messages')
<div class="card form-admin-facilities">
<div class="card-body card-block">
@if($updateMode=='browse')
<h3 class="card-header">
{{ $facility_rows_count }}
{{ Str::plural('Facility', $facility_rows_count) }}
</h3>
<div class="content_with_right_button">
<div class="content_with_right_button_left_content">
<h4 class="card-subtitle ml-3 mr-3">
Your can create/edit/delete facilities
</h4>
</div>
<div class="content_with_right_button_right_button m-0 m-0">
<button type="button" wire:click="add()" class="btn btn-xs btn-success action_link">Add</button>
</div>
</div>
<fieldset class="bordered text-muted p-2 m-2">
<legend class="bordered">Filters</legend>
<div class="content_with_right_button">
<div class="content_with_right_button_left_content">
<input class="form-control admin_control_input" type="text" wire:model.lazy="filter_name">
</div>
<div class="content_with_right_button_right_button pl-2">
<button class="btn btn-outline-secondary nowrap_block" wire:click="render" type="button">
Search
</button>
</div>
</div>
</fieldset>
@endif {{-- @if($updateMode=='browse')--}}
@if($updateMode=='browse')
@if(count($facilityDataRows) > 0)
<div class="table-responsive table-wrapper-for-data-listing">
<table class="table table-striped table-data-listing">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Description</th>
<th>Created</th>
<th></th>
</tr>
</thead>
@foreach($facilityDataRows as $nextFacilityDataRow)
<tr>
<td class="text-right m-0">
<a wire:click="edit({{$nextFacilityDataRow->id}})"
class="p-1 a_edit_item_{{$nextFacilityDataRow->id}} a_link">
{{$nextFacilityDataRow->id}}
</a>
</td>
<td class="text-left m-0">
{{$nextFacilityDataRow->name}}
</td>
<td class="text-left m-0">{{$nextFacilityDataRow->descr}}</td>
<td class="text-left m-0">{{$viewFuncs->getFormattedDate($nextFacilityDataRow->created_at)}}</td>
<td class="nowrap_block m-1">
<a wire:click="edit({{$nextFacilityDataRow->id}})"
class="p-1 a_edit_item_{{$nextFacilityDataRow->id}} a_link">
</a>
<a onclick="return confirm('Are you sure you want to remove the facility?') || event.stopImmediatePropagation()"
wire:click="destroy({{$nextFacilityDataRow->id}})" type="button" class="p-1
a_delete_item_{{$nextFacilityDataRow->id}} a_link">
</a>
</td>
</tr>
@endforeach
</table>
</div> <!-- <div class="table-responsive table-wrapper-for-data-listing"> -->
@endif {{-- @if(count($facilityDataRows) > 0) --}}
@endif {{-- @if($updateMode=='browse') --}}
</div> <!-- <div class="card-body card-block"> -->
<section class="card-footer">
@if($updateMode=='browse')
{{ $facilityDataRows->links() }}
@endif {{-- @if($updateMode=='browse') --}}
</section>
</div> <!-- <div class="card form-admin-facilities"> -->
</div>
</div>
<script>
window.livewire.on('facility_opened', data => {
console.log('facility_opened data::')
console.log(data)
alertsInit(data.mode,data.id)
})
</script>
My “Search” button has type=“button” and no submit rule for form(I do not have any form) or button.
Why it works in wrong way and how to fix it ?
Thanks!