Event not firing on button click

[migueld83371718]

I'm trying to fire an event on an onclik inside a button, but the event does not fire. The button is inside a vue component and I am importing the function from another file.This is my code:

const csi = new CSInterface();
csi.addEventListener("com.my.extension.id.folderSelected", function(e){
    alert('event fired')
});
//The imported function
function collect(){
    let prompt = 'Select folder';
    var path = esHandler(`KT.selectFolderDialog("${prompt}", true)`)
        .then(function (res){
            var event = new CSEvent("com.my.extension.id.folderSelected", "APLICATION");
            event.data = res;
            csi.dispatchEvent(event);
    });
}
//Handler function for the asyncronicous behavior
function esHandler(script){
    return new Promise(function(resolve, reject){
        csi.evalScript(script, resolve);
    });
}

The promise is resolved and the code within "then" is executed , but the alert within the "addevEntListener" is not executed.I have tried changing the scope of the CSEvent to "GLOBAL", but still not firing.The above code is all in the same file. What could be the problem? What am I doing wrong?

[erinferinferinf]

Hi there migueld83371718 !

Which app are you trying to target, exactly? Although some CEP capabilities are cross-application, the implementation in the host app is not always universal.

Also, if you're using ExtendScript, it's based on much older ECMAScript, so  `let` and `const` and promises may not work as expected, depending where you're using them...

Let us know!

Erin

[migueld83371718]

Hi Erin, thanks for fast response

I'm targeting After Effects 2019. The code I posted is running inside the panel vm. It does not seem that the problem occurs within extendscript, since evalScript returns the expected result, and I can trace it once It's assigned to event.data. I guess that works different, but I've tried to communicate this After Effects extension with an Animate extension through vulcan messages, and it has worked.

To add more information, I'm using webpack to use hot reloading with Vuejs, so mybe its' the cause of the problem?

[Justin Taylor-Hyper Brew]

Can you post the code snippet connecting the collect() function to the button? Sounds like your issue is just the button binding.

[migueld83371718]

I do't think that's that, since the code is executed when you click on the button. Maybe it could be happening is that the function is losing the context when called from the component ?. This is the code of the Vue component:

<template>
    <div>
        <button  @click="collect">Collect</button>
    </div>
</template>
<script>
import collect from '../js/kt/collector.js'
export default {
    name:'dev-ae',
    methods: {
        collect(){
            collect()
        }
    }
}
</script>

[Justin Taylor-Hyper Brew · Accepted solution]

Is there a reason it needs to be a CSEvent() if you're not calling it from ExtendScript? If it's just from JS to JS, you can just use a standard CustomEvent() event like this:

document.addEventListener("com.my.extension.id.folderSelected", function(e){ 
    alert('event fired') 
}); 
//The imported function 
function collect(){ 
    let prompt = 'Select folder'; 
    var path = esHandler(`KT.selectFolderDialog("${prompt}", true)`) 
        .then(function (res){ 
            document.dispatchEvent(new CustomEvent('com.my.extension.id.folderSelected', res)); 
    }); 
} 
//Handler function for the asyncronicous behavior 
function esHandler(script){ 
    return new Promise(function(resolve, reject){ 
        csi.evalScript(script, resolve); 
    }); 
} 

[migueld83371718]

That worked, I really didnt' need the CSEvent on that case. It was a bad understanding for my part of the CSEvents

Thanks Justin!