Did you go over this: https://livewire.laravel.com/docs/javascript
JavaScript in Livewire doesn't seems to work?!
Hello to everyone, I'll be quick. Basically Im trying to do Reply system for Comments in one of my website. I want just to do an easy innerHTML replace. My JavaScript is this:
@script
<script>
Livewire.on('replyAdded', (event) => {
console.log('Event received:', event); // Debugging
const EventAccessor = event[0];
let commentId = EventAccessor[0];
let commenterId = EventAccessor[1];
let name = EventAccessor[2];
let body = EventAccessor[3];
console.log('Comment ID:', commentId);
console.log('Name:', name);
console.log('Body:', body);
console.log('Commenter ID:', commenterId);
const repliedToDiv = document.getElementById('replied-to');
const userLink =
"<a class='text-purple-700 underline-offset-2 decoration-purple-500 hover:underline hover:cursor-pointer' href='/user/" +
commenterId + "'> @" + name + "</a>";
const commentLink =
"<a class='text-purple-700 underline-offset-2 decoration-purple-500 hover:underline hover:cursor-pointer' href='#comment" +
commentId + "'>" + body + "</a>";
const newContent = "Replying to" + commentLink + "from" + userLink + ":<br>";
// Append the new content to the replied-to div
repliedToDiv.innerHTML += newContent;
console.log('Replied-to div:', repliedToDiv.innerHTML); // Debugging
});
</script>
@endscript
Basically with a wire:click I send an update to back-end, Back-end sends back a "dispatch(replyAdded)", and on this dispatch I work with JavaScript. The console.log you see inside here, they work displaying correct values. The last console.log is actually even saying "Ok, inside this div there is now this and that" which basically it's what I want to be.. BUT IN HTML, with inspect element, I can see the div being "updated" but the content remains empty, not adding the actual HTML I coded inside the JavaScript... Anybody got any clues? Or even another kind of way to actually work with replying of comments? Thanks!
Please or to participate in this conversation.