I have a livewire ponent which has an update() function to update the ponent when it changes. The update() function is called and updates the item in the database as required. At the end of this function i run a dispatchBrowserEvent() to confirm the update but the corresponding function in my js file is not being called and thus the alert is not being triggered.

I have been using this method from the docs .x/events#browser

The livewire ponent:

<?php

namespace App\Http\Livewire;

use App\Models\Item;
use Livewire\Component;

class EditItem extends Component
{
    public int $item;
    public string $date = '';

    public function render()
    {
        return view('livewire.edit-item');
    }

    public function update()
    {

        $item             = Item::find( 1 );
        $item->date       = now();

        $item->save();

        $this->dispatchBrowserEvent('update-item', ['item' => $item->id, 'date' => $item->date]);

    }
}

its blade file:

<div>
    <button wire:click="update">Update Me!</button>
</div>

in my app.js I have the following:

jQuery(document).ready( function($) {
    /** LIVEWIRE EVENT ACTIONS **/
    window.addEventListener('update-item', event => {
        alert( 'Date updated to: ' + event.detail.date + 'on item with id of ' + event.detail.item );
    })

});

I have a livewire ponent which has an update() function to update the ponent when it changes. The update() function is called and updates the item in the database as required. At the end of this function i run a dispatchBrowserEvent() to confirm the update but the corresponding function in my js file is not being called and thus the alert is not being triggered.

I have been using this method from the docs https://laravel-livewire./docs/2.x/events#browser

The livewire ponent:

<?php

namespace App\Http\Livewire;

use App\Models\Item;
use Livewire\Component;

class EditItem extends Component
{
    public int $item;
    public string $date = '';

    public function render()
    {
        return view('livewire.edit-item');
    }

    public function update()
    {

        $item             = Item::find( 1 );
        $item->date       = now();

        $item->save();

        $this->dispatchBrowserEvent('update-item', ['item' => $item->id, 'date' => $item->date]);

    }
}

its blade file:

<div>
    <button wire:click="update">Update Me!</button>
</div>

in my app.js I have the following:

jQuery(document).ready( function($) {
    /** LIVEWIRE EVENT ACTIONS **/
    window.addEventListener('update-item', event => {
        alert( 'Date updated to: ' + event.detail.date + 'on item with id of ' + event.detail.item );
    })

});

• javascript
• laravel-livewire

• you should change name function update to another name example edit , because has update function already in livewire. – Abdulmajeed Commented May 20, 2022 at 12:26
• Not sure thats right unfortunately... the event is triggered in php and the database is updated (I have also confirmed using xdebug and a breakpoint in the function). Just that the javascript isn't fired by the dispatchBrowserEvent. the event is also fired but it doesn't fire the event in the app.js file. – ThurstonLevi Commented May 20, 2022 at 13:07

2 Answers 2

remove this code in app.js

jQuery(document).ready( function($) {
    /** LIVEWIRE EVENT ACTIONS **/
    window.addEventListener('update-item', event => {
        alert( 'Date updated to: ' + event.detail.date + 'on item with id of ' + event.detail.item );
    })

});

in blade

<div>
        <button wire:click="update">Update Me!</button>
 
    <script>
        document.addEventListener('update-item', event => {
           alert( 'Date updated to: ' + event.detail.date + 'on item with id of ' + event.detail.item );
        })
    </script>
</div>

So it turned out i hadn't ran npm run dev so the javascript didn't exist. after running this all was good.