Toastr
Toastr is a javascript method of popping up an alert notification to the user. It uses jquery and has good styling and functionality.
Categories:
Toastr Notifications and Redirects
Audience
Developers working on the Lawn Bowls Club application (or other Laravel/Livewire projects).
Purpose
Provide consistent methods for:
- Triggering toast notifications
- Redirecting users after a delay while locking the page
Global Toastr Notifications via Custom Events
How It Works
- Dispatch a
toastCustomEvent. - A global script listens and fires Toastr.
- No direct
toastr.success()calls from Blade or Livewire.
Global Toastr Listener Setup (already exists)
<script>
toastr.options = {
"closeButton": true,
"progressBar": true,
"positionClass": "toast-top-right",
"timeOut": 4500,
};
window.addEventListener('toast', event => {
const detail = Array.isArray(event.detail) ? event.detail[0] : event.detail;
if (typeof toastr[detail.alertType] === 'function') {
toastr[detail.alertType](detail.alertMessage);
}
});
</script>
Dispatching a Toast
From Blade:
window.dispatchEvent(new CustomEvent('toast', {
detail: {
alertType: 'success',
alertMessage: 'Your notifications have been saved!'
}
}));
From Livewire PHP component:
$this->dispatch('toast', [
'alertType' => 'success',
'alertMessage' => 'Template updated successfully!',
]);
Redirect with Toastr Notification and Page Lock
Goal
- Disable page interaction.
- Show a toast notification.
- Redirect after a delay.
Helper Function
<script>
function autoRedirectWithToast(url, message = 'Redirecting...', alertType = 'success', delayMs = 3000) {
document.body.style.pointerEvents = 'none';
document.body.style.opacity = '0.5';
window.dispatchEvent(new CustomEvent('toast', {
detail: {
alertType: alertType,
alertMessage: message,
}
}));
setTimeout(() => {
window.location.href = url;
}, delayMs);
}
</script>
Usage on Page Load
<script>
document.addEventListener('DOMContentLoaded', function() {
autoRedirectWithToast('{{ route('dashboard') }}', 'Redirecting you to the dashboard...', 'info', 3000);
});
</script>
Non Toastr Alerts
Using session for Laravel alerts
These methods do work but not always smoothly. You may sometimes get leftover alerts on a subsequent page.
How to call from component
session()->flash('alertType', 'success');
session()->flash('alertMessage', 'Exclusion toggled');
How to listen on a page
I have sometimes run into problems when I have multiple components loaded onto a view and each one must do its own alert calls. There is likelt a way to centralize it and make it happen smoothly but this is the main reason I move to toastr ans it seemed very uneven.
Place this code into you blade where you want the alert to display.
<div class="mt-4">
@if (session('alertMessage'))
<x-alert :type="session('alertType', 'info')" dismissable="true">
{{ session('alertMessage') }}
</x-alert>
@endif
</div>
I have also used a partial for entering this code and an Alert component for additional capabilities.
@include('partials.alert-overlay')