Open modal from input field label

I wanted to open a modal from the checkbox label text, like Terms & Conditions.

Forms\Components\Checkbox::make('terms')
                        ->label('I agree with ')
                        ->hint("[terms & condition.](" . url("/terms") . ")")

Forms\Components\Checkbox::make('terms')
                        ->label('I agree with ')
                        ->hint("[terms & condition.](" . url("/terms") . ")")

The above code works but the link will come in the hint section. Also, it'll open another page and I want to show terms & conditions in the modal.

20 Replies

LeandroFerreira•2y ago

something like this?

use Illuminate\Support\HtmlString;
->hint(new HtmlString(view('terms'))),

use Illuminate\Support\HtmlString;
->hint(new HtmlString(view('terms'))),

<!-- resources/views/terms.blade.php -->
<div>
    <x-filament-support::modal id="myModal">
        <div>Modal content...</div>
    </x-filament-support::modal>
    <a class="cursor-pointer" @click="$dispatch('open-modal', {id: 'myModal'})">Terms & Conditions</a>
</div>

<!-- resources/views/terms.blade.php -->
<div>
    <x-filament-support::modal id="myModal">
        <div>Modal content...</div>
    </x-filament-support::modal>
    <a class="cursor-pointer" @click="$dispatch('open-modal', {id: 'myModal'})">Terms & Conditions</a>
</div>

KuldeepOP•2y ago

Yes, but the

<a>Terms</a>

<a>Terms</a>

will be in the Checkbox label how we'll use

$dispatch

$dispatch

event in that label?

LeandroFerreira•2y ago

Hi, $livewire->dispatchBrowserEvent('open-modal', ['id' => 'myModal']) i think let me know if it works because I don't know 😅

KuldeepOP•2y ago

Forms\Components\Checkbox::make('terms')
                        ->label(new HtmlString('I agree with the <a class="cursor-pointer text-green-600" @click="' . $this->dispatchBrowserEvent('open-modal', ['id' => 'terms-modal']) . '">terms.</a>'))

Forms\Components\Checkbox::make('terms')
                        ->label(new HtmlString('I agree with the <a class="cursor-pointer text-green-600" @click="' . $this->dispatchBrowserEvent('open-modal', ['id' => 'terms-modal']) . '">terms.</a>'))

This works for me but having some issues with it.

$livewire, $dispatch, $this->livewire, $this->dispatch

$livewire, $dispatch, $this->livewire, $this->dispatch

giving undefined variable and doesn't exist error. The main problem is that I'm having a livewire poll every 5sec and it's showing a modal every 5sec without clicking. With a click, no operations performing. My main task is: -> From the page click of a button show 1st modal with a form and it's having a terms checkbox. -> After submitting form show 2nd and after that 3rd modal. All modals have some links through the form checkbox, radio, etc., and all the links open another modal same as the terms modal. With your solutions, I'm trying to find a solution to work it properly. 🙂

LeandroFerreira•2y ago

hum.. a complex form ahh ok, I understood <a>Terms</a> as a label now

@click="$dispatch('open-modal'...

@click="$dispatch('open-modal'...

didn't work?

KuldeepOP•2y ago

It's giving me an undefined variable error on my resource.

LeandroFerreira•2y ago

"The main problem is that I'm having a livewire poll every 5sec and it's showing a modal every 5sec without clicking. With a click, no operations performing." 🤔 Is it necessary?

KuldeepOP•2y ago

Yes, Let me explain the full process.

LeandroFerreira•2y ago

are you using a resource, or custom page, custom livewire component (outside admin panel)... ?

KuldeepOP•2y ago

A product is purchased by a person and after that between merchant-person one to one conversation (Chat only) will go on. So, to show conversations I'm using a filament list resource. On this page, for the product, I've some other functionality which is in 2-3 steps to raising an issue, feedback, etc. and that will be done from the conversation list page through a modal. RelationManager will be not useful for this just because full page is having a custom process and display.

LeandroFerreira•2y ago

you may divide the functionalities in livewire components, widgets, avoiding conflicts.. maybe

KuldeepOP•2y ago

How can I call a livewire component from a filament resource through $emit?

KuldeepOP•2y ago

https://laravel-livewire.com/docs/2.x/events#firing-events I tried this process but not working

Livewire

Events | Livewire

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

toeknee•2y ago

Call or activate? is the livewire in the same class?

KuldeepOP•2y ago

Call, I'm dividing all modals into a single livewire component. And open up them one by one as per the requirment.

toeknee•2y ago

Ok... So just use actions or add the livewire call onto the extraAttributes

KuldeepOP•2y ago

Thank you. But, I wanted to do like this: https://stackoverflow.com/a/60666517 and tried with multiple ways to do it but not working.

Stack Overflow

laravel livewire, how to pass the id or data to another component b...

I have two components Posts and Post, Posts show the posts and by clicking the image I want to show the data of clicked post in another component. Posts class and component down below: Component ...

toeknee•2y ago

That should work fine, or you can render the content at all times, but hide it and condition it to show based on a public property trigger

KuldeepOP•2y ago

$wire.emit works only with a current component in my case. It's not working with a different component. I don't know why but in my case it's not working. 😂 Filament list resource is one type of livewire component and I want to emit another livewire component listener method on button click event.

awcodes•2y ago

Maybe $wire.emitTo or dispatch a browser event.

Gaming

Programming

Open modal from input field label