awsqed Comments - Answer Overflow

you have to make sure that jquery is loaded (accessible via window.jQuery) before the chessboardjs script thats why im using alpine component to init jquery first

import jQuery from 'jquery';

export default function chessboard() {
    return {
        init() {
            window.$ = window.jQuery = jQuery;
        },

        initBoard() {
            const board = window.Chessboard('board', {
                pieceTheme: 'https://chessboardjs.com/img/chesspieces/wikipedia/{piece}.png',
                position: 'start',
            });
        },
    };
};

import jQuery from 'jquery';

export default function chessboard() {
    return {
        init() {
            window.$ = window.jQuery = jQuery;
        },

        initBoard() {
            const board = window.Chessboard('board', {
                pieceTheme: 'https://chessboardjs.com/img/chesspieces/wikipedia/{piece}.png',
                position: 'start',
            });
        },
    };
};

<div
    x-ignore
    ax-load
    data-dispatch="chessboardjs-loaded"
    x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('chessboardjs'))]"
    x-load-js="[@js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('chessboardjs'))]"
    ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('chessboard') }}"
    x-data="chessboard()"
    x-on:chessboardjs-loaded-js.window="initBoard"
>
    <div id="board" style="width: 400px"></div>
</div>

<div
    x-ignore
    ax-load
    data-dispatch="chessboardjs-loaded"
    x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('chessboardjs'))]"
    x-load-js="[@js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('chessboardjs'))]"
    ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('chessboard') }}"
    x-data="chessboard()"
    x-on:chessboardjs-loaded-js.window="initBoard"
>
    <div id="board" style="width: 400px"></div>
</div>

19 replies

FFilament

•Created by MikePageDev on 11/10/2023 in #❓┊help

Using JS package in custom widget

well sorry im not good at explaining things through words (without example code), but basically im using this document https://filamentphp.com/docs/3.x/support/assets#asynchronous-alpinejs-components

19 replies

FFilament

•Created by MikePageDev on 11/10/2023 in #❓┊help

Using JS package in custom widget

i just check my code and it also has the same error, but it rarely occurs, im trying to reproduce it to find out what is happening

19 replies

FFilament

•Created by Chriis on 11/10/2023 in #❓┊help

Accessing $livewire in emptyStateDescription() method

try using

->emptyStateDescription(function (\Filament\Tables\Table $table): string {
    $livewire = $table->getLivewire();
    $activeTab = $livewire->activeTab;

    $description = match ($activeTab) {
        'validated' => 'Aucune fiche(s) trouvé',
        'pending' => 'Aucune fiche(s) en attente',
        'archived' => 'Aucune fiche(s) archivé(s)',
    };

    return $description;
});

->emptyStateDescription(function (\Filament\Tables\Table $table): string {
    $livewire = $table->getLivewire();
    $activeTab = $livewire->activeTab;

    $description = match ($activeTab) {
        'validated' => 'Aucune fiche(s) trouvé',
        'pending' => 'Aucune fiche(s) en attente',
        'archived' => 'Aucune fiche(s) archivé(s)',
    };

    return $description;
});

11 replies

FFilament

•Created by Veur on 11/11/2023 in #❓┊help

Show Filament Table/Form inside an Infolist tab?

you can ultilize this to add a table/form to the infolist https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component i have not tried it yet, but i tried load an infolist in a form so i guess it might work in your situation

4 replies

FFilament

•Created by MikePageDev on 11/10/2023 in #❓┊help

Using JS package in custom widget

can you check the network tab to see the load order of the js files (jquery and chessboardjs)? also try using jquery in the console in the page you put the view code

19 replies

FFilament

•Created by MikePageDev on 11/10/2023 in #❓┊help

Using JS package in custom widget

this is a basic example of how to use it 1. install jquery and chessboardjs via npm 2. register assets

FilamentAsset::register([Css::make('chessboardjs', 'node_modules/@chrisoakman/chessboardjs/dist/chessboard-1.0.0.min.css')->loadedOnRequest(true)]);
FilamentAsset::register([
    Js::make('jquery', 'node_modules/jquery/dist/jquery.min.js')->loadedOnRequest(true),
    Js::make('chessboardjs', 'node_modules/@chrisoakman/chessboardjs/dist/chessboard-1.0.0.min.js')->loadedOnRequest(true),
]);

FilamentAsset::register([Css::make('chessboardjs', 'node_modules/@chrisoakman/chessboardjs/dist/chessboard-1.0.0.min.css')->loadedOnRequest(true)]);
FilamentAsset::register([
    Js::make('jquery', 'node_modules/jquery/dist/jquery.min.js')->loadedOnRequest(true),
    Js::make('chessboardjs', 'node_modules/@chrisoakman/chessboardjs/dist/chessboard-1.0.0.min.js')->loadedOnRequest(true),
]);

3. add to view

<div
    data-dispatch="chessboardjs-loaded"
    x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('chessboardjs'))]"
    x-load-js="[
        @js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('jquery')),
        @js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('chessboardjs')),
    ]"
    x-data="{
        board: null,

        initBoard() {
            this.board = window.Chessboard('board', {
                pieceTheme: 'https://chessboardjs.com/img/chesspieces/wikipedia/{piece}.png',
                position: 'start',
            });
        }
    }"
    x-on:chessboardjs-loaded-js.window="initBoard"
>
    <div id="board" style="width: 400px"></div>
</div>

<div
    data-dispatch="chessboardjs-loaded"
    x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('chessboardjs'))]"
    x-load-js="[
        @js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('jquery')),
        @js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('chessboardjs')),
    ]"
    x-data="{
        board: null,

        initBoard() {
            this.board = window.Chessboard('board', {
                pieceTheme: 'https://chessboardjs.com/img/chesspieces/wikipedia/{piece}.png',
                position: 'start',
            });
        }
    }"
    x-on:chessboardjs-loaded-js.window="initBoard"
>
    <div id="board" style="width: 400px"></div>
</div>

19 replies

FFilament

•Created by Fally on 11/9/2023 in #❓┊help

How to properly search encrypted columns in table

i have not tried this yet https://github.com/spatie/laravel-ciphersweet

4 replies

FFilament

•Created by Thijmen on 11/9/2023 in #❓┊help

Search in hidden column

i use this method to customize the search query and it works https://filamentphp.com/docs/3.x/tables/advanced#searching-records-with-laravel-scout

3 replies

FFilament

•Created by Veur on 11/8/2023 in #❓┊help

Show different widgets in 1 row

7 replies

FFilament

•Created by Jon Mason on 11/7/2023 in #❓┊help

Defining Additional parameters on URL

7 replies

FFilament

•Created by Jon Mason on 11/7/2023 in #❓┊help

Defining Additional parameters on URL

you also need to override the method Resource::getUrl to provide the {location} parameter

7 replies

FFilament

•Created by Mark Chaney on 11/3/2023 in #❓┊help

Form Wizard and Dynamic Fill?

does it make any differences when you comment out this part

        if (isset($this->target_tenant_options)) {
            return $this->target_tenant_options[$table] ?? [];
        }

        if (isset($this->target_tenant_options)) {
            return $this->target_tenant_options[$table] ?? [];
        }

12 replies

FFilament

•Created by cant_code_4_real on 11/7/2023 in #❓┊help

Custom plugins for the Chart Widgets

hope this could help you: https://discord.com/channels/883083792112300104/1161244536685731860/1162932141638832278

2 replies

Gaming

Programming