Hej,
i do have a list of People that is paginated (by 12, just for saying).
Every one has a button right beside the name with a flux:modal (but the problem is the same with other js stuff, just as example).
So, on the first page, all works well.
But when changing the page or searching someone who was not initially in the list of the first 12, the modal will not open. I am suggesting, that the reason is, that the modal is not in the browsers DOM yet.
So, example: User 13 is not in the inital 12, you change page to 2. A click on the modal button will not work. A reload of the page 2 and you can open the modal then (cause it is in the dom now).
Anything I can do?
Newest Livewire, newest Laravel, newest vendor package all along.
Livewire class is using "WithPagination" and has a
public function updatingSearch()
{
$this->resetPage();
}
I have no idea how to solve this one...
--- 2025-10-20: Edit to paste some code I use ---------------------------------
The route goes to Participants::index() , this returns a blade view participants.index that includes some UI and also this line
@livewire('participants.index', ['employers' => $employers])
This is the Participants.Index.php (the Livewire Controller)
<?php
namespace App\Livewire\Participants;
use App\Models\Participants;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\Collection;
use Livewire\Component;
use Livewire\WithPagination;
class Index extends Component
{
use WithPagination;
public string $search = '';
public int $perPage = 12;
public Collection $employers;
public function updatingSearch()
{
$this->resetPage();
}
public function updatingPerPage()
{
$this->resetPage();
}
public function render()
{
$participant = Participants::query()
->with('employer')
->orderBy('surename', 'asc');
if (!empty($this->search)) {
$participant->where(function (Builder $query) {
$query->where('firstname', 'like', '%' . $this->search . '%')
->orWhere('surename', 'like', '%' . $this->search . '%')
->orWhere('street', 'like', '%' . $this->search . '%')
->orWhere('zip', 'like', '%' . $this->search . '%')
->orWhere('city', 'like', '%' . $this->search . '%');
});
}
return view('livewire.participants.index', [
'participants' => $participant->paginate($this->perPage),
]);
}
}
and here is the livewire.participants.index (the livewire view)
<div class="bg-white overflow-hidden sm:rounded-lg">
<div class=" mb-4">
<div class="grid grid-cols-1 md:grid-cols-8 gap-4 bg-zinc-100 p-2 rounded-lg shadow">
<div class="col-span-6">
<flux:input label="Suche" name="search" wire:model.live="search" placeholder="Suche nach Teilnehmern Vor-, Nachname, Straße, Ort, PLZ" clearable />
</div>
<div class="col-span-2">
<flux:select label="Einträge pro Seite" wire:model.live="perPage" placeholder="Einträge pro Seite" class="text-right">
<flux:select.option>3</flux:select.option>
<flux:select.option>6</flux:select.option>
<flux:select.option>9</flux:select.option>
<flux:select.option>12</flux:select.option>
<flux:select.option>18</flux:select.option>
<flux:select.option>24</flux:select.option>
<flux:select.option>50</flux:select.option>
</flux:select>
</div>
</div>
</div>
<table class="w-full rounded-lg shadow ">
<thead class="text-zinc-400 text-sm font-thin">
<tr class="bg-zinc-200">
<td class="p-2">Name</td>
<td class="p-2">Arbeitgeber</td>
<td class="p-2 text-right">Angelegt</td>
</tr>
</thead>
<tbody class="text-zinc-800 text-sm">
@foreach($participants as $participant)
<tr class="bg-zinc-100/70 even:bg-zinc-200/70 hover:bg-zinc-300/70">
<td class="p-2 align-top">
<div class="flex flex-row justify-between">
<div>
{{ $participant->salutation }} {{ $participant->fullName }}<br>
<span class="text-zinc-800/60">
{{ $participant->street }}<br />
{{ $participant->zip }} {{ $participant->city }}
</span>
</div>
<div>
<flux:modal.trigger name="edit-participant-{{ $participant->id }}">
<flux:button icon="pencil-square" variant="primary" color="emerald" tooltip="Hier klicken, um diesen Teilnehmer zu bearbeiten" />
</flux:modal.trigger>
<flux:modal name="edit-participant-{{ $participant->id }}" class="md:w-96">
<form method="POST" action="{{ route('participants.update', $participant) }}">
@csrf
<div class="space-y-6">
<div>
<flux:heading size="lg">Einen Teilnehmer bearbeiten</flux:heading>
<flux:text class="mt-2">Hier kann man die Daten des Teilnehmers ändern.</flux:text>
</div>
<flux:select name="salutation" placeholder="Anrede wählen...">
<flux:select.option :selected="old('salutation', $participant->salutation) === 'Herr'">Herr</flux:select.option>
<flux:select.option :selected="old('salutation', $participant->salutation) === 'Frau'">Frau</flux:select.option>
<flux:select.option :selected="old('salutation', $participant->salutation) === 'Divers'">Divers</flux:select.option>
</flux:select>
<div class="grid grid-cols-2 gap-4">
<flux:input label="Vorname" placeholder="Max" name="firstname" value="{{ old('firstname', $participant->firstname) }}" />
<flux:input label="Nachname" placeholder="Mustermann" name="surename" value="{{ old('surename', $participant->surename) }}" />
</div>
<flux:input label="Straße" placeholder="Musterstraße 97f" name="street" value="{{ old('street', $participant->street) }}" />
<div class="grid grid-cols-3 gap-4">
<flux:input label="PLZ" placeholder="12345" name="zip" value="{{ old('zip', $participant->zip) }}" />
<div class="col-span-2"><flux:input label="Ort" placeholder="Musterstadt" name="city" value="{{ old('city', $participant->city) }}" /></div>
</div>
<flux:input type="date" label="Geburtstag" name="birthday_at" value="{{ old('birthday_at', $participant->birthday_at?->format('Y-m-d')) }}" />
<flux:input label="Telefon" name="phone" value="{{ old('phone', $participant->phone) }}" placeholder="0123 456 789" />
<flux:input type="email" label="E-Mail" name="email" value="{{ old('email', $participant->email) }}" placeholder="[email protected]" />
<flux:select name="employer" placeholder="Mitarbeiter von..." label="Arbeitgeber">
@foreach($employers as $employer)
<flux:select.option value="{{ $employer->id }}" :selected="$employer->id === $participant->employer_id">{{ $employer->name }}</flux:select.option>
@endforeach
</flux:select>
<div class="flex">
<flux:spacer/>
<flux:button type="submit" variant="primary" color="emerald">Teilnehmer ändern</flux:button>
</div>
</div>
</form>
</flux:modal>
</div>
</div>
</td>
<td class="p-2 align-top">
@if ($participant->employer !== null)
<div class="flex flex-row justify-between">
<div class="">
{{ $participant->employer->name }}<br>
<span class="text-zinc-800/60">
{{ $participant->employer->street }}<br />
{{ $participant->employer->zip }} {{ $participant->employer->city }}<br />
</span>
</div>
</div>
@endif
</td>
<td class="p-2 align-top text-right">{{ $participant->created_at->format('d.m.Y H:i') }}</td>
</tr>
@endforeach
</tbody>
</table>
<div class="my-2">
{{ $participants->links() }}
</div>
</div>
I do know, this is not the best solution and I am open to any suggestions.
