I am trying to implement livewire to the project. I am just a beginner, I found some basic examples about livewire search, on the web. Everything works perfectly but the page is not rerendering, every time I want to see the results, I have to change the page from paginator which is the bottom of the page. Otherwise, do not rerender the page. I saw some solutions like the page must be in one parent element and every row has to have a key id etc. I applied everything that I saw on the web, but it does not rerender the results after I write down sth into the input field.
Livewire Blade file,
<div>
<div class="col-md-9">
<input type="text" placeholder="Kategorilerde ara..." wire:model="search" class="form-control bg-white" />
<br>
<div class="table-responsive">
<table class="table table-hover" style="overflow: hidden">
<thead>
<tr>
<th>ID</th>
<th>İsim</th>
<th>Açıklama</th>
<th>Ürün Sayısı</th>
<th>Eylem</th>
</tr>
</thead>
<tbody>
@foreach ($categories as $category)
<tr wire:key="category-{{ $category->category_id }}">
<td>{{$category->category_id}}</td>
<td><b>{{$category->category_name}}</b></td>
<td>{{$category->category_description}}</td>
<td>{{$category->count_products}}</td>
<td>
<div class="row justify-content-left">
<div class="col-3">
<a href="{{route("admin.kategori_duzenle", $category->category_id)}}"
class="btn btn-outline-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-pen" viewBox="0 0 16 16">
<path
d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001zm-.644.766a.5.5 0 0 0-.707 0L1.95 11.756l-.764 3.057 3.057-.764L14.44 3.854a.5.5 0 0 0 0-.708l-1.585-1.585z" />
</svg>
</a>
</div>
<div class="col-3">
@if($category->count_products==0)
<form action="{{route("admin.kategori_sil.post")}}" method="POST">
@csrf
<input type="hidden" value="{{$category->category_id}}" name="category_id">
<button type="submit" class="btn btn-outline-danger">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
<path
d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z">
</path>
<path
d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z">
</path>
</svg>
</button>
</form>
@endif
</div>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
{{$categories->links()}}
</div>
Component file:
<?php
namespace AppLivewire;
use LivewireComponent;
use AppModelsCategory;
use LivewireWithPagination;
class Searchcategory extends Component
{
use WithPagination;
protected $paginationTheme = 'bootstrap';
protected $listeners = ['refreshPage' => '$refresh'];
public $search;
public function mount(){
$this->search = "";
}
public function render()
{
$categories = Category::where('category_name', 'like', '%' . $this->search . '%')->paginate(20);
return view('livewire.searchcategory',[
'categories' => $categories,
]);
}
public function refreshPage()
{
//can verify here that the event successfully emitted to this component. No refresh happens though.
$this->render();
}
}
Main blade file :
<head>
<title>Kategoriler -</title>
@include('admin.layouts.head')
@livewireStyles
</head>
<body>
<div class="screen-overlay"></div>
@include('admin.layouts.left')
<main class="main-wrap">
@include('admin.layouts.top')
<section class="content-main">
<div class="content-header">
<div>
<h2 class="content-title card-title">@if(isset($get_category))
Kategori Düzenle
@else
Kategoriler
@endif
</h2>
</div>
<div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-3">
@if(isset($get_category))
<form method="POST" action="{{route("admin.kategori_duzenle.post")}}">
@csrf
<input type="hidden" value="{{$get_category[0]->category_id}}" name="category_id">
<div class="mb-4">
<label for="product_name" class="form-label">İsim</label>
<input type="text" required placeholder="Buraya yazın"
value="{{$get_category[0]->category_name}}" name="category_name"
class="form-control" id="category_name" />
</div>
<div class="mb-4">
<label class="form-label">Üst Kategori</label>
<select class="form-select" name="category_parent">
<option value=""></option>
@foreach ($categories as $category)
<option value="{{$category->category_id}}" @if($get_category[0]->
category_parent==$category->category_id)
{{"selected='selected'"}}
@endif>{{$category->category_name}}
</option>
@endforeach
</select>
</div>
<div class="mb-4">
<label class="form-label">Açıklamalar</label>
<textarea name="category_description" required placeholder="Buraya yazın"
class="form-control">{{$get_category[0]->category_description}}</textarea>
</div>
<div class="d-grid">
<button class="btn btn-primary text-center" type="submit" name="">Kategori
Düzenle</button>
</div>
</form>
@else
<form method="POST" action="{{route("admin.kategori_ekle.post")}}">
@csrf
<div class="mb-4">
<label for="product_name" class="form-label">İsim</label>
<input type="text" required placeholder="Buraya yazın" value="" name="category_name"
class="form-control" id="category_name" />
</div>
<div class="mb-4">
<label class="form-label">Üst Kategori</label>
<select class="form-select" name="category_parent">
<option value=""></option>
@foreach ($categories as $category)
<option value="{{$category->category_id}}">{{$category->category_name}}
</option>
@endforeach
</select>
</div>
<div class="mb-4">
<label class="form-label">Açıklamalar</label>
<textarea name="category_description" required placeholder="Buraya yazın"
class="form-control"></textarea>
</div>
<div class="d-grid">
<button class="btn btn-primary text-center" type="submit" name="">Kategori
Ekle</button>
</div>
</form>
@endif
</div>
@if(session('msg'))
<div class="alert alert-success" role="alert">{{session('msg')}} </div>
@endif
@error('msg')
<div class="alert alert-danger" role="alert">{{$message}}</div>
@enderror
@livewire('searchcategory')
<!-- .col// -->
</div>
</section>
@include('admin.layouts.footer');
@livewireScripts
<!-- content-main end// -->
</body>
</html>
Also, I realized that livewire update function works only page is changed.
2
Answers
I solved the problem. It was because of lack of ".lazy". I modify the
wire:model="search"withwire:model.lazy="search". It works well.It seems like you’re facing an issue where Livewire doesn’t automatically re-render the page when you enter text into the search input field. To resolve this issue, you should make sure you follow these steps:
Livewire Component Structure: Ensure that your Livewire component structure is set up correctly. It looks like you’ve done this part correctly.
Livewire Model Binding: You’ve correctly used
wire:modelon your input field, which should update thesearchproperty in your Livewire component as you type.Livewire Re-render: Livewire should automatically re-render the component when the
searchproperty changes. However, you’re not seeing this behavior. To force a re-render, you can use$this->searchdirectly in your Blade file to trigger a refresh.When you click the "Refresh" button, it will trigger a Livewire refresh, and the component should re-render with the updated search results.
Pagination: You mentioned that Livewire’s update function works when you change the page. This behavior is expected because Livewire handles pagination automatically. If you want to re-render the component when the search term changes without changing the page, you can use the
$refreshmethod as shown above.Check for JavaScript Errors: Ensure there are no JavaScript errors in your browser’s console that might be preventing Livewire from working correctly.
Livewire Version: Make sure you are using a compatible version of Livewire with your Laravel application.
If you’ve followed these steps and are still facing issues, consider checking your browser’s console for any Livewire-related errors or potential conflicts with other JavaScript libraries. Additionally, updating to the latest version of Livewire and Laravel might help if you’re using older versions.