Level 4
I don't see it described in v3 documentation, but element.updated javascript hook should still be available and might be helpful for you depending on your use-case.
Apr 5, 2024
7
Level 1
Livewire 3 equivalent for Livewire 2 'livewire:update' hook
Hi all,
I'm upgrading my application from Livewire 2 to Livewire 3. If memory serves me right, the 'livewire:update' hook in Livewire 2 would fire after a network response and DOM manipulation is done. In Livewire 3, I see a couple of alternatives, but they aren't ideal.
'morph.updated' - This fires after the DOM is updated, but it fires after every DOM manipulation. Ideally I'd like to fire my hook only once per network request.
'request' > succeed - This fires once per network request, but it seems to fire before the DOM is updated.
Is there another, more appropriate hook? I'm resorting to 'morph.updated' because I have to fire my code after the DOM is updated, but I'm worried about the performance impact of firing it after every individual DOM update.
Thanks!
Level 1
@AdamVaclav Thanks Adam, that's a good thought, and it looks this existed in Livewire 2, but I'm not finding it in Livewire 3. I tried adding the hook, and it's not getting triggered.
$(document).ready(function () {
Livewire.hook('element.updated', (el, component) => {
alert('hi'); //Never gets triggered
})
});
Level 4
Instead of using (document).ready, can you try livewire event listeners as described in v2 docs?
v2 docs
document.addEventListener("DOMContentLoaded", () => {
Livewire.hook('element.updated', (el, component) => {})
});
so
document.addEventListener("livewire:load", () => {
Livewire.hook('element.updated', (el, component) => {
alert('hi');
});
});
or maybe livewire:init, im not sure which listeners to use in this case..
Level 1
@AdamVaclav It looks like livewire 3 has removed livewire:load as well. DOMContentLoaded and livewire:init do work though, but element.updated still doesn't work even when using DOMContentLoaded/livewire:init.
document.addEventListener("livewire:load", () => {
alert('hi1'); //Never reached
Livewire.hook('element.updated', (el, component) => {
alert('hi2'); //Never reached
});
});
document.addEventListener("livewire:init", () => {
alert('hi3'); //Reached
Livewire.hook('element.updated', (el, component) => {
alert('hi4'); //Never reached
});
});
Level 122
@tedtang have you tried dispatching your own event from the render method?
Level 1
@Snapey I think that would work too. The way the code is currently designed, the listener is pretty generic for "listen for any DOM updates that introduce one of X classes that require special handling." Dispatching an event from the render method would require updating 10-20 places but I think it would work.
Level 1
@tedtang I think what you're looking for is this:
Livewire.hook('commit', ({ component, commit, respond, succeed, fail }) => {
// Equivalent of 'message.sent'
succeed(({ snapshot, effect }) => {
// Equivalent of 'message.received'
queueMicrotask(() => {
// Equivalent of 'message.processed'
})
})
fail(() => {
// Equivalent of 'message.failed'
})
})
queueMicrotask inside succeed should only be triggered once after DOM is loaded
I manage to fire a JS once after DOM with the 'request' hook instead of the 'commit' and it's working fine
1 like
Please or to participate in this conversation.