Opening a modal in livewire - laravel

mohammedasheek
October 29, 2024
196 views
0 votes
2 Answers

I am designing a login form. when the user clicks on login button a modal should popup.

I have used livewire emitsTo event.

<button wire:click="$emitTo('login','loginModalOpen')" class="text-primary px-6 py-[13px] font-bold">Sign in</button>.

This is the code for button.

namespace AppLivewireV2Auth;

use LivewireComponent;

class Login extends Component
{
    public bool $open = false;
    protected $listeners = [
        'loginModalOpen' => 'openLoginModal'
    ];

    public function openLoginModal()
    {
        // $this->open = true;
        info("we are here") ;
        // $this->emit('loginModalOpen');
        $this->dispatchBrowserEvent('loginModalOpen');
    }

    public function render()
    {
        return view('livewire.v2.auth.login')
        ->extends('v2.layouts.app')
        ->section('content');
    }
}

<div 
   x-data="{ open: false }"
   @loginModalOpen.window="open = true" 
   x-show="open"
   id="signin-modal" 
   class="relative z-[51]" 
   aria-labelledby="modal-title" 
   role="dialog" 
   aria-modal="true"
   onclick="modalClose()"
>
...............................................
</div>

this is how it is given in livewire/v2/auth/login.blade.php.

But, the modal is not coming. i have checked console and there is’nt any visible errors.

should i include something more ?

Answers

1. Verify your Alpine.js Integration
   <script src="//unpkg.com/alpinejs" defer></script>

2. Right now, the modal is bound to `x-data="{ open: false }"`, but the `open` property may not be updating correctly. Try explicitly updating `open` in Livewire by setting `this->open = true` and binding it directly to Alpine.

3. Modify your `Login` Livewire component to set the `$open` property directly, then pass it to the view

   public function openLoginModal()
   {
       $this->open = true;
       $this->dispatchBrowserEvent('loginModalOpen');
   }

4. Now update the `x-data` binding in your Blade template

   <div 
       x-data="{ open: @entangle('open') }"
       x-show="open"
       @loginModalOpen.window="open = true"
       id="signin-modal" 
       class="relative z-[51]" 
       aria-labelledby="modal-title" 
       role="dialog" 
       aria-modal="true"
       onclick="modalClose()"
   >

Why dont you use actions for that

public function openLoginModal()
{
    return FilamentActionsAction::make('login')
        ->label('Login')
        ->extraAttributes([
            'class' => 'whateverClass',
        ])
        ->modalHeading('Login using email & password')
        ->modalWidth(FilamentSupportEnumsMaxWidth::Small)
        ->form([
            FilamentFormsComponentsTextInput::make('email')
                ->required(),
            FilamentFormsComponentsTextInput::make('password')
                ->password()
                ->required(),
        ])
        ->action(function (array $data) {
            $email = $data['email'];
            $password = $data['password'];
            //attempt login

            //if true redirect
            return redirect()->route('dashboard');

            //else send notification
            Notification::make()
                ->danger()
                ->title('Incorrect credentials')
                ->body('Your login or password is incorrect')
                ->send();
            return;
        });
}

And in your blade you simply put

{{ $this->openLoginModal }}

Please signup or login to give your own answer.

Click here to cancel reply.

Opening a modal in livewire – laravel

Answers