Develop Reference

Calling a function on button click

I have a function on the index.html file of my project, i want this function to work only on the button click. The button click is on the other component. How can i achieve this ?
function clarity(){
debugger
const regArray = ['http://localhost:4200/registration/credentials'];
const currentRoute = window.location.href;
const isRegArray = regArray.indexOf(currentRoute);
if (isRegArray > -1) {
document.querySelector('.yes-button')?.addEventListener('click', () => {
console.log('cancel');
clarity('set', 'Registration Details', 'CancelEvents')
});
}
}
this is the function this clarity is from Microsoft clarity.

Why is my Event Listener not Firing After the Second Event?

I'm building a photo upload form with Livewire, Alpine, and FilePond. After the photos have finished processing I want to show a "Save" button to persist the files.
I'm using Alpine to handle the show/hide. Both event listeners are working correctly when separated, but I just can't seem to get them to work together. The below code is not throwing errors, but it's also not showing the buttons inside the showSaveButtons div.
What am I doing wrong?
<div x-data="showSaveButtons">
<div x-show="open">
Buttons Go Here
</div>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('showSaveButtons', () => ({
open: false,
}));
document.addEventListener("FilePond:processfiles", () => {
Alpine.data('showSaveButtons', () => ({
open: true,
}));
});
})
</script>

This is because you're creating a second Alpine.data object, instead of editing the existing one.
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('showSaveButtons', () => ({
open: false,
init() {
// So we can access "this" inside the listener
let context = this;
document.addEventListener("FilePond:processfiles", () => {
context.open = true;
});
}
});
});
</script>
If you're curious about the init function, check the docs

how to replicate onGestureEvent onBegin action using useAnimatedGestureHandler

I need my gesture handler to respond as soon as a user puts his thumb down on the screen, actually onStart only fires when the thumb starts moving right or left. How can I dot this? Thank you.
const onGestureEvent = useAnimatedGestureHandler({
onStart: () => {
isActive.value = true;
},
onActive: (event) => {
...
},
onEnd: () => {
isActive.value = false;
},
});

CK Editor Laravel Livewire

Is there anyway for Laravel Livewire to make my CKEditor the same behavior as a wire:model.lazy? currently I have a script tag that listens for any changes. Which causes for every type a request towards the component..
<script>
ClassicEditor
.create(document.querySelector('#body'))
.then(editor => {
editor.model.document.on('change:data', () => {
#this.set('body', editor.getData());
})
})
.catch(error => {
console.error(error);
});
</script>
The behavior I want is either a button or everytime I lose focus on the CKEditor the $body will be updated.

Just listen to the submit button and update the value on click:
let editor;
ClassicEditor.create(document.getElementById('post'), {
// configs
})
.then(newEditor => {
editor = newEditor;
})
.catch(error => {});
document.querySelector('button[type="submit"]').addEventListener('click', function () {
#this.set('post', editor.getData());
});

For me and anybody else who have the same issue
The main issue here is on.change this piece of code on( 'change:data'... will make the editor send post request on every single key press.
Solving the issue.
<script>
let body_changed = false;
ClassicEditor
.create(document.getElementById('body'), {})
.then(editor => {
window.body = editor;
detectTextChanges(editor);
detectFocusOut(editor);
})
function detectFocusOut(editor) {
editor.ui.focusTracker.on('change:isFocused', (evt, name, isFocused) => {
if (!isFocused && body_changed) {
body_changed = false;
#this.set('body', editor.getData());
}
})
}
function detectTextChanges(editor) {
editor.model.document.on('change:data', () => {
body_changed = true;
});
}
</script>
Hope this will help me and others in future :)

jQuery click listener fires when it's not supposed to

With the following block of code, when I press #transfer-button the first time round, it alerts with the correct dialog, but when performed a second time before refreshing the page, it continues sequencing with the first dialog clicked until the last dialog clicked. For example, I press "WIlliam" and it will come up with a dialog saying "William", and then I press "Lucy" and a dialog saying "William" will pop up, and then once closed "Lucy" will immediately pop up as well. How do I fix this?
$("#person1").click(function () {
$("#transfer-info").html("Transfer to Lucy.");
$("#transfer-button").click(function () {
alert("Lucy");
})
})
$("#person2").click(function () {
$("#transfer-info").html("Transfer to William.");
$("#transfer-button").click(function () {
alert("William");
})
})

When switching, you are simply adding another event listener, so you end up with multiple event listeners, with both of them firing.
You can do something like this.
$("#person1").click(function () {
$("#transfer-button").unbind('click');
$("#transfer-info").html("Transfer to Lucy.");
$("#transfer-button").click(function () {
alert("Lucy");
});
});
$("#person2").click(function () {
$("#transfer-button").unbind('click');
$("#transfer-info").html("Transfer to William.");
$("#transfer-button").click(function () {
alert("William");
});
});

try
$("#person1").click(function () {
$("#transfer-info").html("Transfer to Lucy.");
$("#transfer-button").off('click')
$("#transfer-button").click(function () {
alert("Lucy");
})
})
$("#person2").click(function () {
$("#transfer-info").html("Transfer to William.");
$("#transfer-button").off('click')
$("#transfer-button").click(function () {
alert("William");
})
})