Since it isn't possible in Livewire to show an alert multiple times with like session()->flash() I tried looking for an alternative. I found a pretty good alternative, which is by dispatching an event and then rendering an alert in JavaScript. But, somehow, nothing renders. The event goes through and works, it gets console logged correctly, but somehow, I can't get anything to render in the HTML.

I've made it a very simple script:

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 the alert container is in the HTML itself:

<div>
    <form wire:submit.prevent="inloggen">
        @csrf

        @if (session()->has('error'))
            <x-alert.alert :bericht="session('error')" :bericht_type="'error'" />
        @endif

        @if (session()->has('succes'))
            <x-alert.alert :bericht="session('succes')" :bericht_type="'succes'" />
        @endif

        <div id="alert-container"></div>

And the event is dispatched here:

        } else {
            $this->dispatch('error', 'Ongeldig e-mailadres of wachtwoord.');
            return;
        }

And at last it logs:

Error event received: ['Ongeldig e-mailadres of wachtwoord.']

So it does receive it, but doesn't edit the HTML. Does anyone know a solution?

Since it isn't possible in Livewire to show an alert multiple times with like session()->flash() I tried looking for an alternative. I found a pretty good alternative, which is by dispatching an event and then rendering an alert in JavaScript. But, somehow, nothing renders. The event goes through and works, it gets console logged correctly, but somehow, I can't get anything to render in the HTML.

I've made it a very simple script:

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 the alert container is in the HTML itself:

<div>
    <form wire:submit.prevent="inloggen">
        @csrf

        @if (session()->has('error'))
            <x-alert.alert :bericht="session('error')" :bericht_type="'error'" />
        @endif

        @if (session()->has('succes'))
            <x-alert.alert :bericht="session('succes')" :bericht_type="'succes'" />
        @endif

        <div id="alert-container"></div>

And the event is dispatched here:

        } else {
            $this->dispatch('error', 'Ongeldig e-mailadres of wachtwoord.');
            return;
        }

And at last it logs:

Error event received: ['Ongeldig e-mailadres of wachtwoord.']

So it does receive it, but doesn't edit the HTML. Does anyone know a solution?

• javascript
• laravel
• laravel-livewire

• Do you see any errors in the browser's console? – Kostas Minaidis Commented Mar 11 at 10:58
• @KostasMinaidis Sorry for the trouble, already found the solution! – Matilda Smets Commented Mar 11 at 12:32

1 Answer 1

I added wire:ignore to the alert container, and this resolved the issue:

<div id="alert-container" wire:ignore>