Method 1: Using Livewire Events

The Livewire component may handle events that are triggered by JavaScript using this method. This is a standard and orderly method.

Step 1: Trigger the Livewire Event from JavaScript

The JavaScript Livewire.emit function may be used to start an event. As an illustration, consider this:

// Trigger a Livewire event named 'myFunction'
Livewire.emit('myFunction', 'value1', 'value2');

In this case, the event you’re emitting is called “myFunction,” and the arguments you wish to send to the Livewire function are “value1” and “value2.”

Step 2: Listen for the Event in Your Livewire Component

You must configure a listener for the event in your Livewire component. When the event is emitted, the listener will invoke the matching method.

use Livewire\Component;

class MyComponent extends Component
{
    protected $listeners = ['myFunction'];

    public function myFunction($param1, $param2)
    {
        // Handle the event and do something with $param1 and $param2
        dd($param1, $param2); // Example to show that it works
    }

    public function render()
    {
        return view('livewire.my-component');
    }
}

• Livewire is informed about which events to watch for by the $listeners array.
• When the myFunction event is triggered, the myFunction method will be invoked.

Method 2: Using AJAX to Call a Livewire Method Directly

You can send a POST request straight to the Livewire endpoint if you’d rather utilize classic AJAX or if you want additional control. When you want specific behavior, you may choose to utilize this more sophisticated way.

Step 1: Determine the Livewire Endpoint

An endpoint URL such as /livewire/message/{component} is assigned to each Livewire component. This is contained in the rendered Livewire component’s HTML.

For example, if your component is named MyComponent, the endpoint might look like this:
<form wire:submit.prevent="submitForm" action="/livewire/message/my-component" method="post">

Step 2: Send the AJAX Request

Here’s an example of how to send a POST request to the Livewire endpoint using jQuery:

$.ajax({
    url: '/livewire/message/my-component',
    method: 'POST',
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'), // Add CSRF token for security
    },
    data: {
        fingerprint: @json($fingerprint), // This is usually added automatically by Livewire
        serverMemo: @json($serverMemo),
        updates: [
            {
                type: 'callMethod',
                payload: {
                    id: 'unique-id', // Optional, unique ID for the request
                    name: 'myFunction', // The name of the method you want to call
                    params: ['param1Value', 'param2Value'] // The parameters to pass
                }
            }
        ]
    },
    success: function(response) {
        console.log('Success:', response);
    },
    error: function(xhr, status, error) {
        console.error('Error:', error);
    }
});

Note:

• A aspect of the request structure used by Livewire is the fingerprint and serverMemo. These may be found by looking through the HTML of your Livewire component or by using Livewire’s JavaScript utilities to collect them.
• Usually, you wouldn’t need to utilize this technique unless you had particular requirements that Livewire’s built-in features couldn’t provide.

Method 3: Using Livewire’s JavaScript API

You may communicate with your Livewire components directly thanks to the JavaScript API provided by Livewire.

Step 1: Find Your Livewire Component ID

To communicate with a Livewire component, you can utilize its unique ID. This ID is present in the produced HTML. It will appear more or less like this:

<div wire:id="your-component-id">

Step 2: Call the Livewire Method Using JavaScript

You can directly invoke one of your Livewire component’s methods:

Livewire.find('your-component-id').call('myFunction', 'value1', 'value2');

• The Livewire component’s ID is ‘your-component-id‘.
• The method you wish to invoke is ‘myFunction‘.
• The arguments you wish to supply to the method are “value1” and “value2.“

When you wish to call a Livewire method directly from JavaScript without producing an event, this is a simple and helpful technique.

Conclusion

Livewire Events: The most popular and straightforward method. JavaScript events may be triggered with Livewire.emit.

Direct AJAX: Offers greater control, but necessitates a thorough comprehension of Livewire’s request architecture.

Livewire’s JavaScript API: A direct approach to invoke Livewire methods from JavaScript is using Livewire’s JavaScript API.