Abes07 Posts - Answer Overflow

Abes07

•Created by Abes07 on 6/4/2024 in #❓┊help

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?

1 replies

FFilament

•Created by Abes07 on 5/29/2024 in #❓┊help

Fill form data from from Controller

I have this custom field that behaves just like a normal TextInput, but i've place a button near it that wen pressed send an event with the current value of the field to its controller. The controller then makes an API request to a server and gets some data back that must me inserted in the other field of the form. The question I have is, is there any wayt to set this data without making another custom field? This is how I send the event: wire:click="dispatchFormEvent('Component::eventName', $state)" And this is how I register that event in the controller:

protected function setUp(): void
    {
        $this->registerListeners([
            'Component::eventName' => [
                function ($component, $customValue) {
                   //Send API request with $customValue
                },
            ],
        ]);
    }

protected function setUp(): void
    {
        $this->registerListeners([
            'Component::eventName' => [
                function ($component, $customValue) {
                   //Send API request with $customValue
                },
            ],
        ]);
    }

6 replies

Gaming

Programming