Livewire: is there an event in JS or Alpine to know the if the action is finished or had errors?

To handle events in Livewire and Alpine.js, you can use Livewire's built-in events to listen for success and error events. Livewire provides several lifecycle hooks that you can use to detect when an action is completed or if there was an error.

Here's a solution using Livewire's emit and on methods along with Alpine.js to handle success and error events:

1. Emit Events in Livewire Component:

   In your Livewire component, you can emit events for success and error scenarios. For example:

   class AddContact extends \Livewire\Component
   {
       public function addContact()
       {
           try {
               // Your logic to add a contact
               // ...
   
               // Emit success event
               $this->emit('contactAdded');
           } catch (\Exception $e) {
               // Emit error event
               $this->emit('contactAddFailed', $e->getMessage());
           }
       }
   
       public function render()
       {
           return view('livewire.add-contact');
       }
   }
   

2. Listen for Events in Alpine.js:

   In your Blade view, you can use Alpine.js to listen for these events and handle them accordingly. Here's an example:

   <div x-data="{ success: false, error: false, errorMessage: '' }"
        x-on:contactAdded.window="success = true; error = false"
        x-on:contactAddFailed.window="success = false; error = true; errorMessage = $event.detail">
       <form class="mt-3" x-on:submit.prevent="$wire.addContact()">
           <!-- Your form fields here -->
           <button type="submit">Add Contact</button>
       </form>
   
       <div x-show="success" class="mt-3 text-green-500">
           Contact added successfully!
       </div>
   
       <div x-show="error" class="mt-3 text-red-500">
           Error adding contact: <span x-text="errorMessage"></span>
       </div>
   </div>
   

In this example:

• The Livewire component emits contactAdded on success and contactAddFailed on error.
• Alpine.js listens for these events using x-on:eventName.window and updates the state accordingly.
• The success and error messages are displayed based on the state.

This approach ensures that you can handle both success and error scenarios in your JavaScript code using Alpine.js and Livewire events.