Unable to implement a one-time script hook after component updates

Hello,

I am looking for a way to execute simple javascript (console.log) after a component has applied all changes to the DOM. I have a simple Livewire component

class Example extends Component
{

    public $randomNumber = 1;

    public function generateRandomNumber()
    {
        $this->randomNumber = rand(1, 20);
    }

    public function render()
    {
        return view('livewire.example');
    }
}

and a blade view:

    <button type="button" wire:click="generateRandomNumber()"> Generate links</button>
    
    @for ($i = 1; $i <= $randomNumber; $i++)
            <div>

                <a href='#'> link {{$i}}</a>

            </div>
    @endfor

How to console log number of generated links

console.log(document.getElementsByTagName('a').length);

The only thing that shows correct amount is morph.updated hook, but this is called on every single DOM node that has been updated so not ideal.

Everything else i try shows number of links from before i click the button (it is one step behind - hope that makes sense).

LaryAI

1 year ago

Level 58

To execute JavaScript after a Livewire component has finished updating the DOM, you can use Livewire's livewire:load and livewire:update events. These events are fired when the component is initially loaded and after it updates, respectively. You can listen for these events and run your JavaScript code accordingly.

Here's how you can implement it:

Add a script to your Blade view to listen for the livewire:update event.
Inside the event listener, execute your JavaScript code to log the number of links.

Here's how you can modify your Blade view to include this:

<button type="button" wire:click="generateRandomNumber()">Generate links</button>

@for ($i = 1; $i <= $randomNumber; $i++)
    <div>
        <a href='#'>link {{$i}}</a>
    </div>
@endfor

<script>
    document.addEventListener('livewire:update', function () {
        console.log(document.getElementsByTagName('a').length);
    });
</script>

Explanation:

livewire:update Event: This event is triggered after Livewire updates the DOM. By listening to this event, you ensure that your JavaScript code runs after all changes have been applied.
document.getElementsByTagName('a').length: This line of code counts the number of <a> tags in the document, which corresponds to the number of links generated by your component.

This approach ensures that your console log reflects the current state of the DOM after each update.

martinbean

1 year ago

Level 80

@rafwoski Why don’t you use the native events Livewire offers you for this, as per Lary’s comment?

rafwoski

1 year ago

Level 4

Thanks for your reply @martinbean. I've tried livewire DOM Morph updated hook and it works but as I said - it is called multiple times.

I cant find the suggested livewire:update event in Livewire V3 docs.

Please or to participate in this conversation.