Accessing Repeater field from JS code in view

Hi fellows, I have a basic form like this:

ViewField::make('qr-codes')
  ->view('filament.forms.components.qr-code-reader'),
Repeater::make('payload')
  ->defaultItems(0)
  ->label('Notificaciones')
  ->columns(6)
  ->schema([
       TextInput::make('sent_at')->label('Enviado el'),
       TextInput::make('sent_by')->label('Enviado por'),
       TextInput::make('received_by')->label('Recibe'),
       TextInput::make('received_at')->label('Recibido el'),
       TextInput::make('receiver_phone')->label('Telefono receptor'),
 ]),

ViewField::make('qr-codes')
  ->view('filament.forms.components.qr-code-reader'),
Repeater::make('payload')
  ->defaultItems(0)
  ->label('Notificaciones')
  ->columns(6)
  ->schema([
       TextInput::make('sent_at')->label('Enviado el'),
       TextInput::make('sent_by')->label('Enviado por'),
       TextInput::make('received_by')->label('Recibe'),
       TextInput::make('received_at')->label('Recibido el'),
       TextInput::make('receiver_phone')->label('Telefono receptor'),
 ]),

This render QRCode scanner preview window. Here I use https://unpkg.com/[email protected]/html5-qrcode.min.js libary and it works liek expected. Problem I having is could not find a way from this view to access the repeater and add scanned code.

        function onScanSuccess(decodedText, decodedResult) {
            if (decodedText !== lastResult) {
                ++countResults;
                lastResult = decodedText;
                const dec = decodedText.split(';');
                document.getElementById("{{ $getId() }}").value = dec[9];
                //alert('Scanned ' + decodedText);
            }

        function onScanSuccess(decodedText, decodedResult) {
            if (decodedText !== lastResult) {
                ++countResults;
                lastResult = decodedText;
                const dec = decodedText.split(';');
                document.getElementById("{{ $getId() }}").value = dec[9];
                //alert('Scanned ' + decodedText);
            }

using this call to getElementById I have access to temporary input I'm using for debug, but how can I access repeater and add elements from here? Or mayne I could try other approach? Tanks in advance for your answers

Solution

Hi, I think finally get it working. Added wire:ignore and now qr-scanner is not dissapearing after $wire.dispatchFormEvent('addItem', $data);

<div class="mt-6" name="{{ $getName() }}" id="{{ $getId() }}"
    wire:ignore
    x-init= "
                html5QrcodeScanner = new Html5QrcodeScanner('qr-reader', { fps: 10, qrbox: 220, });
                html5QrcodeScanner.render(onScanSuccess);
            "
    x-data="
              {
                    onScanSuccess($data) {
                        $wire.dispatchFormEvent('addItem', $data);
                    },
                }"
    >

    <div xmlns:x-filament="http://www.w3.org/1999/html">
        <div class="md:container md:mx-auto">
            <div class="columns-3">
                <div id="qr-reader"></div>
            </div>
        </div>
    </div>
</div>

<script src="https://unpkg.com/[email protected]/html5-qrcode.min.js" type="text/javascript"></script>

<div class="mt-6" name="{{ $getName() }}" id="{{ $getId() }}"
    wire:ignore
    x-init= "
                html5QrcodeScanner = new Html5QrcodeScanner('qr-reader', { fps: 10, qrbox: 220, });
                html5QrcodeScanner.render(onScanSuccess);
            "
    x-data="
              {
                    onScanSuccess($data) {
                        $wire.dispatchFormEvent('addItem', $data);
                    },
                }"
    >

    <div xmlns:x-filament="http://www.w3.org/1999/html">
        <div class="md:container md:mx-auto">
            <div class="columns-3">
                <div id="qr-reader"></div>
            </div>
        </div>
    </div>
</div>

<script src="https://unpkg.com/[email protected]/html5-qrcode.min.js" type="text/javascript"></script>

Jump to solution

Accessing Repeater field from JS code in view

Hi fellows, I have a basic form like this:

ViewField::make('qr-codes')
  ->view('filament.forms.components.qr-code-reader'),
Repeater::make('payload')
  ->defaultItems(0)
  ->label('Notificaciones')
  ->columns(6)
  ->schema([
       TextInput::make('sent_at')->label('Enviado el'),
       TextInput::make('sent_by')->label('Enviado por'),
       TextInput::make('received_by')->label('Recibe'),
       TextInput::make('received_at')->label('Recibido el'),
       TextInput::make('receiver_phone')->label('Telefono receptor'),
 ]),

ViewField::make('qr-codes')
  ->view('filament.forms.components.qr-code-reader'),
Repeater::make('payload')
  ->defaultItems(0)
  ->label('Notificaciones')
  ->columns(6)
  ->schema([
       TextInput::make('sent_at')->label('Enviado el'),
       TextInput::make('sent_by')->label('Enviado por'),
       TextInput::make('received_by')->label('Recibe'),
       TextInput::make('received_at')->label('Recibido el'),
       TextInput::make('receiver_phone')->label('Telefono receptor'),
 ]),

        function onScanSuccess(decodedText, decodedResult) {
            if (decodedText !== lastResult) {
                ++countResults;
                lastResult = decodedText;
                const dec = decodedText.split(';');
                document.getElementById("{{ $getId() }}").value = dec[9];
                //alert('Scanned ' + decodedText);
            }

        function onScanSuccess(decodedText, decodedResult) {
            if (decodedText !== lastResult) {
                ++countResults;
                lastResult = decodedText;
                const dec = decodedText.split(';');
                document.getElementById("{{ $getId() }}").value = dec[9];
                //alert('Scanned ' + decodedText);
            }

Solution

Hi, I think finally get it working. Added wire:ignore and now qr-scanner is not dissapearing after $wire.dispatchFormEvent('addItem', $data);

<div class="mt-6" name="{{ $getName() }}" id="{{ $getId() }}"
    wire:ignore
    x-init= "
                html5QrcodeScanner = new Html5QrcodeScanner('qr-reader', { fps: 10, qrbox: 220, });
                html5QrcodeScanner.render(onScanSuccess);
            "
    x-data="
              {
                    onScanSuccess($data) {
                        $wire.dispatchFormEvent('addItem', $data);
                    },
                }"
    >

    <div xmlns:x-filament="http://www.w3.org/1999/html">
        <div class="md:container md:mx-auto">
            <div class="columns-3">
                <div id="qr-reader"></div>
            </div>
        </div>
    </div>
</div>

<script src="https://unpkg.com/[email protected]/html5-qrcode.min.js" type="text/javascript"></script>

<div class="mt-6" name="{{ $getName() }}" id="{{ $getId() }}"
    wire:ignore
    x-init= "
                html5QrcodeScanner = new Html5QrcodeScanner('qr-reader', { fps: 10, qrbox: 220, });
                html5QrcodeScanner.render(onScanSuccess);
            "
    x-data="
              {
                    onScanSuccess($data) {
                        $wire.dispatchFormEvent('addItem', $data);
                    },
                }"
    >

    <div xmlns:x-filament="http://www.w3.org/1999/html">
        <div class="md:container md:mx-auto">
            <div class="columns-3">
                <div id="qr-reader"></div>
            </div>
        </div>
    </div>
</div>

<script src="https://unpkg.com/[email protected]/html5-qrcode.min.js" type="text/javascript"></script>

Jump to solution

Accessing Repeater field from JS code in view

Accessing Repeater field from JS code in view

Similar Threads

Similar Threads

Similar Threads