Livewire Development Tutorials, Guides & Insights

• To emit a custom event from the PHP side:

   $this->emit('eventName', $optionalData);

Introduction:

In modern web applications, rich text editors are essential for providing users with a way to format and customize their content. Laravel Livewire, combined with a WYSIWYG editor like Summernote, allows developers to manage content dynamically without the need for page reloads. In this tutorial, we’ll walk through how to integrate Summernote with Laravel Livewire, ensuring smooth, real-time content updates.

php artisan make:livewire SearchPosts

Open the newly created SearchPosts.php file and set up the properties and methods to manage the search query and results:

Next, create the Blade view for this component in resources/views/livewire/dynamic-form.blade.php.

<div>
    <!-- Category Dropdown -->
    <label for="category">Category:</label>
    <select id="category" wire:model="selectedCategory">
        <option value="">Select a category</option>
        @foreach($categories as $category)
            <option value="{{ $category }}">{{ ucfirst($category) }}</option>
        @endforeach
    </select>

    <!-- Subcategory Dropdown -->
    @if(!empty($subcategories))
        <label for="subcategory" class="mt-4">Subcategory:</label>
        <select id="subcategory">
            <option value="">Select a subcategory</option>
            @foreach($subcategories as $subcategory)
                <option value="{{ $subcategory }}">{{ $subcategory }}</option>
            @endforeach
        </select>
    @endif
</div>

<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.