Filament•6mo ago

Upgrade v3. Alpine issue

Hello everyone. I am upgrading to Filament v3. I have solved a lot of issues and am close to a stable version of my application. I have a problem with Alpine not allowing to load the Signature field from Filament Autograph. Attached are the console errors I get when I open the main page and the modal that has the Signature field. Thanks in advance!

Solution:

The x-filament::page already has the head and body in it. You’re breaking the rendering engine in the browser.

Jump to solution

3 Replies

gon.exe•6mo ago

For more information. I am having the issue on a custom Page:

<x-filament::page>

    <head>
        <meta name="csrf-token" content="{{ csrf_token() }}">
    </head>

    <style>
        #map {
            width: 100%;
            height: 500px;
        }

    </style>

    @script

        <script>

            window.addEventListener('dispatchEvent', event => {
                initMap(event.detail[0].formData);
            });

            function initMap(formData) {
                //  ... code
            }

            function calculateAndDisplayRoute(directionsService, directionsRenderer, data, formData) {
                //  ... code
            }

        </script>

    @endscript

    <body>

        <!-- Form panel -->
        @livewire('work-orders-route.work-orders-route-form')

        <!-- Map panel -->
        <div id="map"style="display: none">>
        </div>

        <!-- Table panel -->
        <div id="wo-table" style="display: none">
            @livewire('work-orders-route.work-orders-route-table')
        </div>

        <!--   Google Maps API   -->
        <script
            src="https://maps.googleapis.com/maps/api/js?key=@php echo env("GOOGLE_MAPS_API_KEY");@endphp&v=weekly"
            defer>
        </script>

    </body>

</x-filament::page>

<x-filament::page>

    <head>
        <meta name="csrf-token" content="{{ csrf_token() }}">
    </head>

    <style>
        #map {
            width: 100%;
            height: 500px;
        }

    </style>

    @script

        <script>

            window.addEventListener('dispatchEvent', event => {
                initMap(event.detail[0].formData);
            });

            function initMap(formData) {
                //  ... code
            }

            function calculateAndDisplayRoute(directionsService, directionsRenderer, data, formData) {
                //  ... code
            }

        </script>

    @endscript

    <body>

        <!-- Form panel -->
        @livewire('work-orders-route.work-orders-route-form')

        <!-- Map panel -->
        <div id="map"style="display: none">>
        </div>

        <!-- Table panel -->
        <div id="wo-table" style="display: none">
            @livewire('work-orders-route.work-orders-route-table')
        </div>

        <!--   Google Maps API   -->
        <script
            src="https://maps.googleapis.com/maps/api/js?key=@php echo env("GOOGLE_MAPS_API_KEY");@endphp&v=weekly"
            defer>
        </script>

    </body>

</x-filament::page>

Any idea ?

Solution

awcodes•6mo ago

The x-filament::page already has the head and body in it. You’re breaking the rendering engine in the browser.

gon.exe•6mo ago

Thanks @awcodes !

Gaming

Programming

Upgrade v3. Alpine issue