Sweetalert не запускался после бэкэнд-события Laravel
Я использую SweetAlert2, чтобы показать уведомление для моего приложения TALL (Laravel 11 x Livewire 3) Stack. Я попытался сделать его пригодным для повторного использования, используя Laravel Trait, и поместил код внешнего интерфейса в основной макет, и его следует запускать всякий раз, когда сеанс генерируется из бэкэнда laravel.
Класс Livewire:
<?php
namespace App\Livewire;
use App\Traits\Swalable;
use Livewire\Attributes\Title;
use Livewire\Component;
class Index extends Component
{
use Swalable;
public function save()
{
// Do something on backend
$this->flashSuccess('The process was sucessfully done.');
}
#[Title('Index page')]
public function render()
{
return view('livewire.index');
}
}
Проходимая черта:
<?php
namespace App\Traits;
trait Swalable {
public function flashSuccess($message) {
$this->setupFlash("Sukses", $message, 'success');
}
public function flashError($message) {
$this->setupFlash("Gagal", $message, 'error');
}
private function setupFlash($title, $message, $type) {
session()->flash('swalMsg', [
'title' => $title,
'message' => $message,
'type' => $type,
]);
}
}
Основная планировка:
<!DOCTYPE html>
<html lang = "{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>{{ $title ?? 'Page Title' }}</title>
@vite(['resources/css/app.css','resources/js/app.js'])
</head>
<body>
{{ $slot }}
@if (session()->has('swalMsg'))
<script>
document.addEventListener("DOMContentLoaded", function(event) {
notification = @json(session()->pull("swalMsg"));
Swal.fire({
title: notification.title,
text: notification.message,
icon: notification.type,
confirmButtonText: 'Cool'
})
@php
session()->forget('swalMsg');
@endphp
})
</script>
@endif
</body>
</html>
Намерение заключалось в том, что после завершения метода save() на бэкэнде должно быть запущено сладкое предупреждение, однако ничего не произошло,
Что я пробовал до сих пор:
Я попытался жестко запрограммировать параметры из серверной части, но предупреждение все равно не сработало.
Попробуйте запустить сразу после полной загрузки страницы (без событий из серверной части), это сработает и выдаст предупреждение отлично. Так что я думаю, что проблема не в интерфейсе.
Добавление перенаправления после перепрошивки сработало, но я не хотел, чтобы страница перезагружалась, поэтому в моем случае это должен быть реальный вопрос: как показать предупреждение без обновления страницы
как этого добиться?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я бы посоветовал вам просто отправить событие из компонента через $this->dispatch(), которое вы можете прослушать в окне. Это означает отсутствие мигания и необходимости прикреплять несколько событий или что-то еще.
В своей черте измените ее так, чтобы отправлять событие через $this->dispatch(),
trait Swalable {
public function flashSuccess($message) {
$this->setupFlash("Sukses", $message, 'success');
}
public function flashError($message) {
$this->setupFlash("Gagal", $message, 'error');
}
private function setupFlash($title, $message, $type) {
$this->dispatch('swalMsg',
title: $title,
message: $message,
type: $type,
);
}
}
Затем в своем макете просто слушайте это событие с помощью window.addEventListener("swalMsg", ...).
<!DOCTYPE html>
<html lang = "{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>{{ $title ?? 'Page Title' }}</title>
@vite(['resources/css/app.css','resources/js/app.js'])
</head>
<body>
{{ $slot }}
<script>
window.addEventListener("swalMsg", function(event) {
const notification = event.detail;
Swal.fire({
title: notification.title,
text: notification.message,
icon: notification.type,
confirmButtonText: 'Cool'
});
})
</script>
</body>
</html>