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•16mo 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>

Kuldeep•16mo 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•16mo ago

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

Kuldeep•16mo 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•16mo 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?

Kuldeep•16mo ago

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

LeandroFerreira•16mo 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?

Kuldeep•16mo ago

Yes, Let me explain the full process.

LeandroFerreira•16mo ago

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

Kuldeep•16mo 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•16mo ago

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

Kuldeep•16mo ago

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

Kuldeep•16mo 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•16mo ago

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

Kuldeep•16mo ago

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

toeknee•16mo ago

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

Kuldeep•16mo 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•16mo 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

Kuldeep•16mo 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•16mo ago

Maybe $wire.emitTo or dispatch a browser event.

Gaming

Programming

Open modal from input field label