Filament•6mo ago

Notification not working

Hi all, I want to use the filament notification in my webshop using JS I also use the Filament panel for my admin panel. I have followed the installation guide (for the notifications) but the notification aren't working. App.blade.php

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
          integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <title>{{ config('app.name') }} - @yield("title")</title>
    @filamentStyles

    @vite('resources/css/app.css')
</head>
<body class="flex flex-col min-h-screen justify-between m-0 p-0 bg-azg-gray">
@include('partials.header')
<main class="flex flex-1 h-full ">
    @yield('content')
</main>
@include('partials.footer')
@filamentScripts

@vite('resources/js/app.js')

<script>
    new FilamentNotification()
        .title('Saved successfully')
        .send()
    console.log('Hello')
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
          integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <title>{{ config('app.name') }} - @yield("title")</title>
    @filamentStyles

    @vite('resources/css/app.css')
</head>
<body class="flex flex-col min-h-screen justify-between m-0 p-0 bg-azg-gray">
@include('partials.header')
<main class="flex flex-1 h-full ">
    @yield('content')
</main>
@include('partials.footer')
@filamentScripts

@vite('resources/js/app.js')

<script>
    new FilamentNotification()
        .title('Saved successfully')
        .send()
    console.log('Hello')
</script>
</body>
</html>

The console output; Anyone know why the notifaction are not displayed? Thanks!

12 Replies

LarsOP•6mo ago

Anyone?

toeknee•6mo ago

Did you imporve the notification and notifisions action and build the js?

LarsOP•6mo ago

Yeah i have ran npm run dev

Liam•6mo ago

Maybe try to wrap the notification in a DOMContentLoaded event listener

Tally•6mo ago

Does it work when you run it in the DevTools console?

new FilamentNotification()
        .title('Saved successfully')
        .send()

new FilamentNotification()
        .title('Saved successfully')
        .send()

LarsOP•6mo ago

Nope doesnt work either

LarsOP•6mo ago

It seems that something does work but their is no visual

Tally•6mo ago

ok, so it's being dispatched... only not shown 😉 you can try to dispatch a persistent one and search for it in your html

new FilamentNotification()
    .title('Saved successfully')
    .persistent()
    .send()

new FilamentNotification()
    .title('Saved successfully')
    .persistent()
    .send()

Search for

 notificationComponent

 notificationComponent

in your Elements tab If it's there you can figure out why it's not being showed

LarsOP•6mo ago

It is not their

LarsOP•6mo ago

If i login into to admin and run this it does show the notifcation

  new FilamentNotification()
        .title('Saved successfully')
         .persistent().send()

  new FilamentNotification()
        .title('Saved successfully')
         .persistent().send()

Lara Zeus•6mo ago

I didnt see @livewire('notifications') 🙂

LarsOP•6mo ago

it is their now But it is still not working I am going to try installing it in a new project to see if this project is the issue or that is doesnt work in general.

Gaming

Programming

Notification not working