Level 102
Can you show livewire.members-table.blade.php
Sep 3, 2022
32
Level 1
livewire default pagination buttons reloading page
I am using the livewire pagination, but on clicking the page buttons, page reloads
use WithPagination;
public $search = '';
public function clear(){
$this->search = "";
}
public function render()
{
$searchTerm = '%'. trim($this->search) .'%';
return view('livewire.members-table', [
'members' => Member::where('name_first', 'like', $searchTerm)
->orderBy('memno', 'asc')
->paginate(10)
]);
}
buttons do have wire:click, like wire:click="gotoPage(8, 'page')". but "click" it seems not firing ajax as it should. livewire search box above it functions well, there is no js error in console Any ideas?
Level 1
<div style="max-height: 500px; overflow: hidden">
<input type="text" wire:model="search" placeholder="Search">
<em>{{$search}}</em>
<button wire:click="clear">Clear</button>
@include('layouts.members-live')
</div>
Level 102
@yashinfo I don't see any pagination?
Level 1
@Sinnbeck layouts.members-live
....
@foreach($members as $member)
<tr class="border-b-2">
<td>
{{ $member->name_first }} {{ $member->name_middle }} {{ $member->name_last }}
</td>
<td>
{{ $member->memno }}
</td>
<td>
<a href="#" class="inline-flex items-center px-4 py-1 bg-blue-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-700 active:bg-blue-900 focus:outline-none focus:border-blue-900 focus:ring ring-blue-300 disabled:opacity-25 transition ease-in-out duration-150" @click="memno = '{{$member->memno}}'; mname='{{ $member->name_first }} {{ $member->name_middle }} {{ $member->name_last. '/ ' . $member->memno}}'; showModal = false"
>Select</a>
</td>
</tr>
@endforeach
</tbody>
</table>
{{ $members->links() }}
Level 102
@yashinfo does it work if you copy the table/pagination into the first view?
Level 104
@yashinfo it is not in the Component view template
Level 1
actually the search is also erratic, sometimes table is not rendered
Level 102
@yashinfo move it all inside the same view file and see if starts working
Level 104
@yashinfo add a debounce modifier to the search to better manage the network requests
<input type="text" wire:model.debounce="search" placeholder="Search">
https://laravel-livewire.com/docs/2.x/properties#debouncing-input
You also need the state associated with the table inside the correct view template - otherwise the Component is not in charge display and pagination
Level 1
@sinnbeck Still same after copying in the first view now everything is in the same view
Level 1
<div style="max-height: 500px; overflow: hidden">
<input type="text" wire:model.debounce.500ms="search" placeholder="Search">
<em>{{$search}}</em>
<button wire:click="clear">Clear</button>
<table class="w-full" style="margin: 10px 0 10px 0;">
<thead>
<tr class="border-b-2">
<th class="text-start">नाव </th>
<th class="text-start">सभासद क्र.</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach($members as $member)
<tr class="border-b-2">
<td>
{{ $member->name_first }} {{ $member->name_middle }} {{ $member->name_last }}
</td>
<td>
{{ $member->memno }}
</td>
<td>
<a href="#" class="inline-flex items-center px-4 py-1 bg-blue-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-700 active:bg-blue-900 focus:outline-none focus:border-blue-900 focus:ring ring-blue-300 disabled:opacity-25 transition ease-in-out duration-150" @click="memno = '{{$member->memno}}'; mname='{{ $member->name_first }} {{ $member->name_middle }} {{ $member->name_last. '/ ' . $member->memno}}'; showModal = false"
>निवडा</a>
</td>
</tr>
@endforeach
</tbody>
</table>
{{ $members->links() }}
</div>
Level 1
I am using this component inside a alpine js modal
<div x-cloak x-data="{ 'showModal': false }" @keydown.escape="showModal = false">
<!-- Trigger for Modal -->
<button type="button" @click="showModal = true" class="inline-flex items-center px-4 py-2 bg-gray-50 border rounded-md font-semibold text-sm text-gray-700 uppercase tracking-widest hover:bg-gray-100 active:bg-gray-300 focus:outline-none focus:border-gray-900 focus:ring ring-gray-300 disabled:opacity-25 transition ease-in-out duration-150"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
शोध</button>
<!-- Modal -->
<div
class="fixed inset-0 z-30 flex items-center justify-center overflow-auto bg-black bg-opacity-50"
x-show="showModal"
>
@livewireStyles
<!-- Modal inner -->
<div class="max-w-7xl md:w-1/2 px-6 py-4 mx-auto min-h-60 text-left bg-white rounded shadow-lg"
@click.away="showModal = false"
x-transition:enter="motion-safe:ease-out duration-300"
x-transition:enter-start="opacity-0 scale-90"
x-transition:enter-end="opacity-100 scale-100">
<!-- Title / Close-->
<div class="flex items-center justify-between">
<h5 class="mr-3 text-black max-w-none"></h5>
<button type="button" class="z-50 cursor-pointer" @click="showModal = false">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
<!-- content -->
<div class="">
<livewire:members-table/>
@livewireScripts
</div>
<script>
</script>
</div>
</div>
</div>
Level 104
@yashinfo why are your Livewire styles and scripts inside the Model's view template???
Level 1
@tykus hmm.. they are in the page, parent div, where the component is used. As per the example in docs. https://laravel-livewire.com/docs/2.x/quickstart#include-the-component
Level 1
Level 104
@yashinfo not sure I can understand how you have structured your application - you have a members-live layout which contains a modal which uses a Livewire component, is this correct? Where is the search input and where are the pagination links?
Level 1
@tykus @tykus All code in "members-live" is now inside the "members-table" file as I have posted above
So structure is like: create>modal>component. The component renders "members-table" which now has all the view code for it.
I have tried it in simplest placement: create>component too, doesn't work
Level 104
@yashinfo doesn't work - how; what is not working as expected?
Level 1
@tykus on clicking the page buttons in pagination, page reloads just after showing that page
Level 1
@tykus on clicking the page buttons in pagination, page reloads just after showing that page. I show a popup/modal of list with search box, which has pagination. if any pagination link is clicked, the list is updated but immediately whole page reloads which should not happen with livewire.
Level 10
I’m still learning Livewire myself. But don’t you have to wrap the HTML in a parent div to render properly?
Shouldn’t it be:
<div>
// Your HTM here
</div>
Minus the spaces.
Level 1
@RayC I think that is what needed in the component's view, I have wrapped the html in single div
Level 1
I suspect there is some conflict between livewire js and apline js, but there is no error in console so no clue what it is.
Level 6
@yashinfo you've called use WithPagination in the components class but have you imported it also at the top of the component like use Livewire\WithPagination;?
Level 1
@ollie_123 yes:
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithPagination;
use App\Models\Member;
Level 1
Pagination links are only working as intended when the livewire component is placed outside the form tag. Is this standard behavior?
Please or to participate in this conversation.