topic Re: Communication between widget.js and widget.html in ArcGIS Web AppBuilder Questions

Communication between widget.js and widget.html

TimWitt2 — Wed, 11 Feb 2015 19:37:37 GMT

Hey everybody,

If I create a textbox or a button in my widget.html file, how can I access these in my widget.js file?

For example if I create a button in my widget.html file with the id="TestButton", how would I write a button click event in my widget.js file?

Thanks!

Tim

Re: Communication between widget.js and widget.html

RobertScheitlin__GISP — Fri, 10 Dec 2021 20:28:20 GMT

Tim,

Just use

on(this.TestButton, 'click', lang.hitch(this, function(evt){
    //todo
}));

Re: Communication between widget.js and widget.html

TimWitt2 — Fri, 10 Dec 2021 20:28:23 GMT

Thanks Robert,

I get the following error:

fail to open widget Demo. TypeError: Cannot read property 'on' of undefined

Here is what I have in my widget.js

define(['dojo/_base/declare', 'jimu/BaseWidget', 'dojo/dom', "dojo/on",'dojo/_base/lang'],
function(declare, BaseWidget, dom, on, lang) {
  //To create a widget, you need to derive from BaseWidget.
  return declare([BaseWidget], {
    // DemoWidget code goes here 


    //please note that this property is be set by the framework when widget is loaded.
    //templateString: template,


    baseClass: 'jimu-widget-demo',


    postCreate: function() {
      this.inherited(arguments);
      console.log('postCreate');
    },


    startup: function() {
      this.inherited(arguments);
      this.mapIdNode.innerHTML = 'map id:' + this.map.id;
      console.log('startup');
    },


    onOpen: function(){
      console.log('It is open, come on in!');
   on(this.clear, 'click', lang.hitch(this, function(evt){  
  console.log("It is clear!")
  }));


    },


    onClose: function(){
      console.log('onClose');
   var test = this;
    },


    onMinimize: function(){
      console.log('onMinimize');
    },


    onMaximize: function(){
      console.log('onMaximize');
    },


    onSignIn: function(credential){
      /* jshint unused:false*/
      console.log('onSignIn');
    },


    onSignOut: function(){
      console.log('onSignOut');
    }
  });
});

And here is what I have in my widget.html:

<div>
<button id="clear" data-dojo-type="dijit/form/Button" type="button" data-dojo-attach-point="button">Clear All</button> 
</div>

Any ideas what I did wrong?

Tim

Re: Communication between widget.js and widget.html

RobertScheitlin__GISP — Fri, 10 Dec 2021 20:28:25 GMT

Tim,

Use the dojo attach point name and not the dom id.

on(this.button, 'click', lang.hitch(this, function(evt){
    console.log("It is clear!")
}));

Re: Communication between widget.js and widget.html

TimWitt2 — Wed, 11 Feb 2015 20:09:27 GMT

Robert works like a charm!

What would I do if I have more than one button and text fields?

Re: Communication between widget.js and widget.html

RobertScheitlin__GISP — Wed, 11 Feb 2015 20:14:45 GMT

Give each control a unique data-dojo-attach-point name. You can also add the event handler stuff directly in the html template.

data-dojo-attach-point="list" data-dojo-attach-event="click:_selectResultItem,mouseover:_overResultItem,mouseout:_outResultItem"

Re: Communication between widget.js and widget.html

TimWitt2 — Wed, 11 Feb 2015 20:16:29 GMT

Thanks Robert that makes sense.