Filament•7mo ago

How to pass data from view to Resource TextInput?

Guys, need help! I have Resource with $form where custom view renders svg image with different clickable areas, I need to pass clicked svg path id from that view to $form TextInput, how can I do that?

Solution:

another reference: https://livewire.laravel.com/docs/javascript#using-javascript-in-livewire-components

Laravel

JavaScript | Laravel

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

Jump to solution

17 Replies

LeandroFerreira•7mo ago

What code are you doing?

fantastique2233OP•7mo ago

In filament.map.svg i've a svg map, when I click on certain area I get an id of the area in console, but I can't figured out how to pass the id to the TextInput::make('obj_id')

LeandroFerreira•7mo ago

would you like to set a value?

fantastique2233OP•7mo ago

yes

LeandroFerreira•7mo ago

hum.. maybe $wire.$set('data.obj_id', 'new_value') ?

fantastique2233OP•7mo ago

I didn't create Livewire component just view for svg, should I create it for that?

LeandroFerreira•7mo ago

could you share the code you are using in this view?

fantastique2233OP•7mo ago

here it is - https://codepen.io/steamn/pen/BaeadXM

Steamn

CodePen

BaeadXM

...

LeandroFerreira•7mo ago

Did you try my code? Any console errors?

fantastique2233OP•7mo ago

Sorry, but I don't know how to use it(

LeandroFerreira•7mo ago

on click?

fantastique2233OP•7mo ago

$wire is not defined in console

LeandroFerreira•7mo ago

I think you can use something like this

<div x-data>
    <svg>
        <style>
            rect {
                fill: blue;
            }
        </style>
        <rect x="10" y="10" width="500" height="100" @click="$wire.$set('data.obj_id', '1')"></rect>
    </svg>
</div>

<div x-data>
    <svg>
        <style>
            rect {
                fill: blue;
            }
        </style>
        <rect x="10" y="10" width="500" height="100" @click="$wire.$set('data.obj_id', '1')"></rect>
    </svg>
</div>

fantastique2233OP•7mo ago

my svg file is too big and complex (it's map overlay), so I can't follow your suggestion. Is it possible to use $wire.$set inside JS script like on that screenshot?

LeandroFerreira•7mo ago

I think so, but I think you should use alpineJs https://alpinejs.dev/

Alpine.js

A rugged, minimal framework for composing behavior directly in your markup.

Solution

LeandroFerreira•7mo ago

another reference: https://livewire.laravel.com/docs/javascript#using-javascript-in-livewire-components

Laravel

JavaScript | Laravel

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

fantastique2233OP•7mo ago

Wrapping the script with @script @endscript solved the issue! thank you so much Leandro!

Gaming

Programming

How to pass data from view to Resource TextInput?