Hi, I am creating a custom component for the Google Recaptcha.
When the user completes the captcha, a callback is called.
I am capturing this callback in my component and want to raise an event so any code that is using the component can react to it.
I am using the webix.callEvent() method in the code below and when I step through it, I can see it firing. But, the code that is attached and waiting on the event never gets fired.
Any ideas why this might be?
Attach Event…
var recaptcha = this.$$("recaptcha");
recaptcha.attachEvent("verified", function(){
debugger
})
Custom Component…
webix.protoUI({
name: “recaptcha”,
defaults : {
},
$init:function(config){
var elm = webix.html.create("div", {
class:"g-recaptcha",
style : "margin:10px!important"
});
this.$view.appendChild(elm);
this._waitWidget = webix.promise.defer();
this.$ready.push(this._require_rrecpatcha);
},
_require_rrecpatcha:function(){
var cdn = "https://www.google.com/recaptcha";
webix.require([
cdn+"/api.js?render=explicit",
]).then(webix.bind(this._init_recaptcha, this)).catch(function(e){
console.log(e);
});
},
_init_recaptcha:function(){
var config = this.config.config;
config.callback = this._callback;
window.grecaptcha.ready(() => {
this._widget = window.grecaptcha.render(this.$view.firstChild, config);
this._waitWidget.resolve(this._widget);
});
},
_callback:function(){
webix.callEvent("verified", 1);
}
}, webix.ui.view, webix.EventSystem);