Filament•3w ago

Integrating js library and talking with the server

( i need the client and the server to talk to each other) I'm integrating a custom js library ( html5-qrcode ) for scanning QRCoodes with a camera. Once i've got the code scanned I'm giving the user a custom button that when pressed launches an event to the backend that fetches some data and the fills the whole form with the new data. The issue i'm having is showing a loading indicator while the server is fetching the data. For now i have a custom component with a <x-filament::input.wrapper>, a prefix button, a <x-filament::input and a suffix button ( i've tried passing the action to the wrapper but it doesn't seem to work ). When pressing the prefix action it uses the JS library and it recovers the string and updates the input values and the state of the field. When pressing the suffix button it launches an event to the server wire:click="dispatchFormEvent('Barcode::GetDataFromBarcode')" and on the controller i have the following code:

protected function setUp(): void
    {
        $this->registerListeners([
            'Barcode::GetDataFromBarcode' => [
                function (Component $component) {
                    $barcode  = $this->getState();
                    $this->getSetCallback()('name',$barcode);
                }
            ]
        ]);
    }

protected function setUp(): void
    {
        $this->registerListeners([
            'Barcode::GetDataFromBarcode' => [
                function (Component $component) {
                    $barcode  = $this->getState();
                    $this->getSetCallback()('name',$barcode);
                }
            ]
        ]);
    }

Everything work fine but this is an async operation and i'd like to show a loading indicator until the server has finished. I've tried with $this->dispatchEvent('event'); from the controller and on alpine with x-on:event=" do things " but the client doesn't get the event. I've also tied setting a variable on the controller, creating its getter and assigning it in x-data but it does't update the client value right away it does only the second or third time i press the button. Is there an easy way to make the client and the server talk to each other?

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Integrating js library and talking with the server