Event not firing on button click

Question

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?

Justin Taylor-Hyper Brew · Accepted Answer

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>

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); 
    }); 
}

erinferinferinf · Answer

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded