Filament•4w ago

Laracasts Alpine code in an action

Im following a guide on laracasts and im at a point for it has a form component, and has attributes for: x-data, x-on:submit.prevent. I am wondering if I can use a custom action to call the alpinejs function from my app.js file, rather than creating a new blade file etc Bit lost trying to find this in the docs?

Solution:

probably something like this ->alpineClickHandler('register(xx)')

Jump to solution

24 Replies

Jamie Cee•4w ago

Anyone have any idea?

LeandroFerreira•4w ago

please provide mor info what you are trying to do..

Jamie Cee•4w ago

So I have a function in my app.js called 'registerPasskeys' that has some js logic. I want to have an action that fires off that js function

Tables\Actions\Action:make('my action')
->action(fire my js here);

Tables\Actions\Action:make('my action')
->action(fire my js here);

LeandroFerreira•4w ago

if you register your js file, you can call this using ->alpineClickHandler('registerPasskeys')

Jamie Cee•4w ago

Ill give that a go when im back in the office tomorrow, thank you Morning, I've just managed to have a test of this, im getting 'registerPasskey' is not defined, and im not sure the correct syntax.

document.addEventListener('alpine:init', () => {
    Alpine.data('registerPasskey', () => ({
        async register() {
            const options = await axios.get('api/v1/passkeys/register');
            const passkey = await startRegistration(options.data);

            // console.log(options.data);
        },
    }))
});

document.addEventListener('alpine:init', () => {
    Alpine.data('registerPasskey', () => ({
        async register() {
            const options = await axios.get('api/v1/passkeys/register');
            const passkey = await startRegistration(options.data);

            // console.log(options.data);
        },
    }))
});

The above is my alpinejs code. I tried registerPasskey, registerPasskey.register and just register, none of which work It looks like its searching the livewire.js file but I have it defined in my app.js file. So moved code into a custom.js file, Registered in service provider:

        /* Register the js file, use vite facade because vite hashes the file name in build */
        FilamentAsset::register([
            Js::make('custom-script', Vite::asset('resources/js/custom.js')),
        ]);

        /* Register the js file, use vite facade because vite hashes the file name in build */
        FilamentAsset::register([
            Js::make('custom-script', Vite::asset('resources/js/custom.js')),
        ]);

When I refresh browser, I initially get this:

SyntaxError: Cannot use import statement outside a module (at custom-DEbtIa2Z.js:1:1)

SyntaxError: Cannot use import statement outside a module (at custom-DEbtIa2Z.js:1:1)

And when I click my button, its still searching in the livewire.js file instead of my custom.js

LeandroFerreira•4w ago

Are you using import axios in your custom JS?

Jamie Cee•4w ago

Yeah Custom.js

import Alpine from 'alpinejs';
import axios from 'axios';
import { startRegistration } from "@simplewebauthn/browser";

document.addEventListener('alpine:init', () => {
    console.log('Alpine initializing...');
    Alpine.data('registerPasskey', () => ({
        async register() {
            console.log('Register function called');
            try {
                const options = await axios.get('/api/v1/passkeys/register');
                console.log('Options received:', options.data);
                await startRegistration(options.data);
            } catch (error) {
                console.error('Error during passkey registration:', error);
            }
        },
    }));
});

import Alpine from 'alpinejs';
import axios from 'axios';
import { startRegistration } from "@simplewebauthn/browser";

document.addEventListener('alpine:init', () => {
    console.log('Alpine initializing...');
    Alpine.data('registerPasskey', () => ({
        async register() {
            console.log('Register function called');
            try {
                const options = await axios.get('/api/v1/passkeys/register');
                console.log('Options received:', options.data);
                await startRegistration(options.data);
            } catch (error) {
                console.error('Error during passkey registration:', error);
            }
        },
    }));
});

I see the "alpine initializing" console log, so the file is being read.

Jamie Cee•4w ago

Just when I click the button I get this

LeandroFerreira•4w ago

Try to import via cdn instead of

Jamie Cee•4w ago

Does that mean like this:

        FilamentAsset::register([
            Js::make('custom', 'https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js')->module(true),
            // Js::make('custom', Vite::asset('resources/js/custom.js'))->module(true),
        ]);

        FilamentAsset::register([
            Js::make('custom', 'https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js')->module(true),
            // Js::make('custom', Vite::asset('resources/js/custom.js'))->module(true),
        ]);

As thats spat out a whole lot of errors in dev tools,

Jamie Cee•4w ago

If I move the logic outside of the Alpine.data function, it works. So its something to do with the Alpine.data not registering it as a component or its registered but the alpineClickHandler cant detect it.

LeandroFerreira•4w ago

sorry for the delay.. where are you using this action? register axios and simplewebauthn via cdn in your appserviceprovider

FilamentAsset::register([
    Js::make('axios', 'https://unpkg.com/axios@1.6.7/dist/axios.min.js'),
    Js::make('simplewebauthn', 'https://unpkg.com/@simplewebauthn/browser/dist/bundle/index.es5.umd.min.js'),
    Js::make('custom-script', __DIR__.'/../../resources/js/custom.js'),
]);

FilamentAsset::register([
    Js::make('axios', 'https://unpkg.com/axios@1.6.7/dist/axios.min.js'),
    Js::make('simplewebauthn', 'https://unpkg.com/@simplewebauthn/browser/dist/bundle/index.es5.umd.min.js'),
    Js::make('custom-script', __DIR__.'/../../resources/js/custom.js'),
]);

Try this

Action::make('customAction')
    ->extraAttributes(['x-data' => 'registerPasskey'])
    ->alpineClickHandler('register')

Action::make('customAction')
    ->extraAttributes(['x-data' => 'registerPasskey'])
    ->alpineClickHandler('register')

don't forget to run php artisan filament:assets to publish the assets

Jamie Cee•4w ago

Sorry, I got caught in a meeting. So the action is in a relationmanager, in the headerActions array. I've added the code you linked above and got the following errors. The first 2 are just because Ill have to add the urls to the cors part of my docker container. I got a cannot use import statement outside a module error, then that the registerPasskey is not defined. This again being my code:

import Alpine from 'alpinejs';
import axios from 'axios';
import { startRegistration } from "@simplewebauthn/browser";

// const callRegisterPasskey = async () => {
//     try {
//         const options = await axios.get('/passkeys/register');
//         console.log('Options received:', options.data);
//         await startRegistration(options.data);
//     } catch (error) {
//         console.error('Error during passkey registration:', error);
//     }
// }

document.addEventListener('alpine:init', () => {
    console.log('Alpine initializing...');

    // callRegisterPasskey();

    Alpine.data('registerPasskey', () => ({
        async register() {
            // callRegisterPasskey();
            try {
                const options = await axios.get('/passkeys/register');
                console.log('Options received:', options.data);
                await startRegistration(options.data);
            } catch (error) {
                console.error('Error during passkey registration:', error);
            }
        },
    }));

});

import Alpine from 'alpinejs';
import axios from 'axios';
import { startRegistration } from "@simplewebauthn/browser";

// const callRegisterPasskey = async () => {
//     try {
//         const options = await axios.get('/passkeys/register');
//         console.log('Options received:', options.data);
//         await startRegistration(options.data);
//     } catch (error) {
//         console.error('Error during passkey registration:', error);
//     }
// }

document.addEventListener('alpine:init', () => {
    console.log('Alpine initializing...');

    // callRegisterPasskey();

    Alpine.data('registerPasskey', () => ({
        async register() {
            // callRegisterPasskey();
            try {
                const options = await axios.get('/passkeys/register');
                console.log('Options received:', options.data);
                await startRegistration(options.data);
            } catch (error) {
                console.error('Error during passkey registration:', error);
            }
        },
    }));

});

LeandroFerreira•4w ago

remove imports and register via cdn in your provider

Gaming

Programming

Laracasts Alpine code in an action