Written by

Ruslan K

Question Ruslan K · Jun 14, 2018

AddEventListener for a control

#Caché #ZEN

Is there a way to add event listener for a zen control?

I have a custom text control and I want to add 'change' event listener for it.

Is it possible to do not using 'onchange' property?

Discussion (3)0

Add reply

Comments

Ruslan K · Jun 14, 2018

I have tried to do that in my custom text control class in method onloadHandler()

var elem = document.getElementById(this.id);

elem.firstChild.addEventListener('change', function(){
zenThis.doSomeWork();
});

But this code is not working.

0 0

Vitaliy Serdtsev · Jun 14, 2018

Try so:

<FONT COLOR="#000080">Class dc.test Extends %ZEN.Component.page
</FONT><FONT COLOR="#000000">{
</FONT><FONT COLOR="#000080">XData </FONT><FONT COLOR="#000000">Contents [ </FONT><FONT COLOR="#000080">XMLNamespace </FONT><FONT COLOR="#000000">= </FONT><FONT COLOR="#800080">"http://www.intersystems.com/zen" </FONT><FONT COLOR="#000000">]
{
  <</FONT><FONT COLOR="#000080">page </FONT><FONT COLOR="#800000">xmlns</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"http://www.intersystems.com/zen"</FONT><FONT COLOR="#000000">>
    <</FONT><FONT COLOR="#000080">button </FONT><FONT COLOR="#800000">id</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"btn1" </FONT><FONT COLOR="#800000">caption</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"Test Server"</FONT><FONT COLOR="#000000">/>
    <</FONT><FONT COLOR="#000080">button </FONT><FONT COLOR="#800000">id</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"btn2" </FONT><FONT COLOR="#800000">caption</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"Test Client"</FONT><FONT COLOR="#000000">/>
  </</FONT><FONT COLOR="#000080">page</FONT><FONT COLOR="#000000">>
}
</FONT><FONT COLOR="#000080">ClassMethod </FONT><FONT COLOR="#000000">SrvTest() [ </FONT><FONT COLOR="#000080">ZenMethod </FONT><FONT COLOR="#000000">]
{
  </FONT><FONT COLOR="#800080">&js<</FONT><FONT COLOR="#000000">zenAlert(</FONT><FONT COLOR="#800000">'from Server'</FONT><FONT COLOR="#000000">);</FONT><FONT COLOR="#800080">>
</FONT><FONT COLOR="#000000">}
</FONT><FONT COLOR="#000080">ClientMethod </FONT><FONT COLOR="#000000">test() [ </FONT><FONT COLOR="#000080">Language </FONT><FONT COLOR="#000000">= javascript ]
{
  zenAlert(</FONT><FONT COLOR="#800000">'from Client'</FONT><FONT COLOR="#000000">);
}
</FONT><FONT COLOR="#000080">ClientMethod </FONT><FONT COLOR="#000000">onloadHandler() [ </FONT><FONT COLOR="#000080">Language </FONT><FONT COLOR="#000000">= javascript ]
{
  document.getElementById(</FONT><FONT COLOR="#800000">'btn1'</FONT><FONT COLOR="#000000">).addEventListener(</FONT><FONT COLOR="#800000">'click'</FONT><FONT COLOR="#000000">,</FONT><FONT COLOR="#800000">new </FONT><FONT COLOR="#000000">Function(</FONT><FONT COLOR="#800000">'evt'</FONT><FONT COLOR="#000000">,</FONT><FONT COLOR="#800000">'return zenPage.SrvTest();'</FONT><FONT COLOR="#000000">),false);
  document.getElementById(</FONT><FONT COLOR="#800000">'btn2'</FONT><FONT COLOR="#000000">).addEventListener(</FONT><FONT COLOR="#800000">'click'</FONT><FONT COLOR="#000000">,</FONT><FONT COLOR="#800000">new </FONT><FONT COLOR="#000000">Function(</FONT><FONT COLOR="#800000">'evt'</FONT><FONT COLOR="#000000">,</FONT><FONT COLOR="#800000">'return zenPage.test();'</FONT><FONT COLOR="#000000">),false);
}
}</FONT>

0 0

Ruslan K · Jun 14, 2018

This solution works for me.

Maybe somebody will need it.

Method onloadHandler() is in custom text control class.

ClientMethod onloadHandler() [ Language = javascript ]
{
var comp = this;
var elem = this.findElement('control');
elem.addEventListener('click', function(){
        comp.someMethod();
    });

}

0 0