DeveloperBreeze

Livewire Components Development Tutorials, Guides & Insights

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

Tutorial
javascript php

Managing Modals with Livewire and JavaScript 

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Listen for the custom 'open-modal' event
        window.addEventListener('open-modal', event => {
            const modalId = event.detail.modalId;
            const modalElement = document.getElementById(modalId);
            if (modalElement) {
                modalElement.classList.remove('hidden');
            }
        });

        // Close modal logic
        document.querySelectorAll('[data-modal-hide]').forEach(button => {
            button.addEventListener('click', function () {
                const modalId = this.getAttribute('data-modal-hide');
                const modalElement = document.getElementById(modalId);
                if (modalElement) {
                    modalElement.classList.add('hidden');
                }
            });
        });
    });
</script>
  • Custom Events: We use Livewire's dispatchBrowserEvent to emit a custom event open-modal with the modalId as a parameter.
  • JavaScript Listener: A listener is set up for the open-modal event to open the specified modal by removing the hidden class. This ensures that JavaScript functions properly even after Livewire re-renders parts of the page.
  • Close Logic: We add listeners for buttons that hide the modals, ensuring a full modal lifecycle.

Aug 14, 2024
Read More