DeveloperBreeze

Dom Re-Render Development Tutorials, Guides & Insights

Unlock 1+ expert-curated dom re-render tutorials, real-world code snippets, and modern dev strategies. From fundamentals to advanced topics, boost your dom re-render skills on DeveloperBreeze.

Managing Modals with Livewire and JavaScript

Tutorial August 14, 2024
javascript php

Add methods to dispatch custom browser events when buttons are clicked:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class ModalManager extends Component
{
    public function openUserProfileModal()
    {
        $this->dispatchBrowserEvent('open-modal', ['modalId' => 'user-profile-modal']);
    }

    public function openSettingsModal()
    {
        $this->dispatchBrowserEvent('open-modal', ['modalId' => 'settings-modal']);
    }

    public function openNotificationsModal()
    {
        $this->dispatchBrowserEvent('open-modal', ['modalId' => 'notifications-modal']);
    }

    public function render()
    {
        return view('livewire.modal-manager');
    }
}