How to invoke a livewire method from javascipt?

Just so you know the reason, I've put the details in BACKSTORY below. What I need to do, is invoke my method in the livewire 3 component from javascript, rather than using Alpine, which is not working correctly for some reason. Code I have written is below and this is functioning exactly as I wish, in that the code is being invoked every time a click is made on a "live" seat, however, I just can't get it to invoke the livewire method. I've tried $wire (and added x-data to the parent div) as below I've also tried window.Livewire.dispatch and window.Livewire.dispatchTo None of these methods throw an error. However, the method test is not run!

const floor = document.getElementById('page_container');
floor.addEventListener('click', (e) => {
    if ( e.target.classList.contains('alloc') || e.target.classList.contains('av') ) 
    {
        if (e.target.id>'') 
        {
            $wire.dispatch('test');
            $wire.dispatchTo('Booking','test');
            console.log('just ran a seatClick');
        }
    }
});

Test method:

public function test() {
    Log::info('Log message', array('context' => "function test() just run!"));
}

BACKSTORY

I have a div which shows a seat plan which can be clicked many times to select/deselect seats. I have been using Alpine to send these clicks to a livewire component's method, to process the seat click and send the result back to the blade component via $this->dispatch(...) and display on the page using JS. This all works fine, except that I get an error "Alpine Expression Error: $wire is not defined" displayed in the console which worries me. To fix the "$wire is not defined" error, I added x-data, however, now the error doesn't display, the @click is invoked twice each time it is clicked! So to use Alpine I seem to either have to leave the error in and worry this is going to cause problems in some browsers, or fix the error and code around the duplicated clicks.

LaryAI

2 years ago

Level 58

To invoke a Livewire method from JavaScript, you can use the Livewire.emit or Livewire.emitTo methods. Here's how you can modify your JavaScript code to call the test method on your Livewire component:

const floor = document.getElementById('page_container');
floor.addEventListener('click', (e) => {
    if (e.target.classList.contains('alloc') || e.target.classList.contains('av')) {
        if (e.target.id > '') {
            // Emit an event to Livewire to invoke the 'test' method
            Livewire.emit('test');
            // If you need to specify the component, use 'emitTo'
            // Replace 'booking-component' with your actual Livewire component name
            Livewire.emitTo('booking-component', 'test');
            console.log('just ran a seatClick');
        }
    }
});

And your Livewire component's test method should remain the same:

public function test() {
    Log::info('Log message', array('context' => "function test() just run!"));
}

Make sure that your Livewire component's name in the emitTo function matches the actual name of your Livewire component. For example, if your Livewire component is named BookingComponent, you should use Livewire.emitTo('booking-component', 'test');.

Also, ensure that your Livewire scripts are properly loaded on the page where you're trying to invoke the Livewire method from JavaScript. If Livewire's JavaScript is not loaded, the Livewire object will not be available, and you won't be able to emit events to your component.

Snapey

2 years ago

Level 122

make sure you dont have alpine installed twice. Livewire will pull it in, so check you dont have it loaded seperately

Lozza

2 years ago

Level 4

Thanks for the reply @Snapey - I don't believe I have it loaded twice but have sent you an email in case you know better (which is likely!!).

In the meantime, for anyone interested, LaryAI came up with a solution for invoking the livewire method from JS as follows:

            const livewireComponent = e.target.closest('[wire\:id]');
            if (livewireComponent) {
                // Get the Livewire component ID
                const componentId = livewireComponent.getAttribute('wire:id');
                // Find the Livewire component instance
                const component = window.Livewire.find(componentId);
                // Call the Livewire component method
                component.call('seatClick',e.target.id);
            }

Hope it helps someone in the future!!

Snapey

2 years ago

Level 122

@Lozza just bear in mind that Lary is totally ignorant of Livewire 3, it came along after Lary was born.

2 likes

Lozza

2 years ago

Level 4

Thanks @Snapey - just to let you know that you were correct about Alpine being loaded twice, since it was unnecessarily in the app.js file. Alpine is now functioning perfectly with no console errors... HAPPY DAYS!!!

Please or to participate in this conversation.