Filament•2mo 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

Lars van Herwijnen•2mo ago

Anyone?

toeknee•2mo ago

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

Lars van Herwijnen•2mo ago

Yeah i have ran npm run dev

Liam•2mo ago

Maybe try to wrap the notification in a DOMContentLoaded event listener

Tally•2mo ago

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

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

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

Lars van Herwijnen•2mo ago

Nope doesnt work either

Lars van Herwijnen•2mo ago

It seems that something does work but their is no visual

Tally•2mo 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

Lars van Herwijnen•2mo ago

It is not their

Lars van Herwijnen•2mo 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•2mo ago

I didnt see @livewire('notifications') 🙂

Lars van Herwijnen•2mo 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