Mar 9, 2025
0
Level 1
Livewire alert isn't shown
Since Livewire can't display the same error again after form submission, I tried using JavaScript to dispatch an event to my JavaScript to show the alert. Problem is, it doesn't show the alert. The console log says Error event received: ['Ongeldig e-mailadres of wachtwoord.'] so it's passed to JavaScript properly, but the alert isn't shown.
This is my backend (partially):
public function inloggen()
{
try {
$this->rateLimit(5);
} catch (TooManyRequestsException) {
$this->dispatch('error', 'Je hebt te vaak geprobeerd om in te loggen. Probeer het later opnieuw.');
return;
}
$this->validate([
'email' => 'required|email',
'wachtwoord' => 'required',
'remember' => 'boolean',
]);
$remember = $this->remember ? true : false;
$guard = $this->route == 'beheer.inloggen' ? 'web' : 'vaste_klanten';
if (Auth::guard($guard)->attempt(['email' => $this->email, 'password' => $this->wachtwoord], $remember)) {
session()->regenerate();
if ($this->route == 'beheer.inloggen') {
return redirect()->route('beheer.dashboard');
} elseif ($this->route == 'klant.inloggen') {
return redirect()->route('klant.overzicht');
}
} else {
$this->dispatch('error', 'Ongeldig e-mailadres of wachtwoord.');
return;
}
}
This is my alert.js file:
document.addEventListener("DOMContentLoaded", function () {
Livewire.on("error", (bericht) => {
console.log("Error event received:", bericht);
alert();
});
Livewire.on("succes", (bericht) => {
console.log("Success event received:", bericht);
alert();
});
function alert()
{
const alert_container = document.getElementById("alert-container");
alert_container.innerHTML = "test";
}
});
And this is my frontend (partially):
<div>
<form wire:submit.prevent="inloggen">
@csrf
<div id="alert-container"></div>
</form>
</div>
Does anyone know a solution for this issue and what's causing it?
Please or to participate in this conversation.