topic Re: Apply an onclick function to dynamically created anchor tags in Web AppBuilder Custom Widgets Questions

Apply an onclick function to dynamically created anchor tags

MikeKoon — Thu, 12 Oct 2017 18:46:19 GMT

I have successfully called a function ("kr_highlight") that creates map graphics of xy locations onto the map when the anchor tag is clicked WHEN my widget has the anchor tags hard coded into the widget.html page.

But now I want, after the widget loads, the anchor tags generated dynamically through js when the user clicks an "expand" link inside the widget.html page which populates the div.innerhtml. During the dynamic generation I want to apply either an onclick function or an eventlistener to the id's of the dymaically generated anchor tags. When I change I try to do this dynamically I get:

"Uncaught ReferenceError: kr_highlight is not defined"

where "kr_highlight" is the function being called from the onclick event.

for (x in b){
//dynamically create anchor tags
}

Version 1:

//now apply the onclick event to each id version 1
var id = document.getElementById("31");
       id.addEventListener("click",function(){
            kr_highlight('38.358569,-81.71833');
         });

Another version:

//now apply the onclick event to each id version 2
on("31", "click", kr_highlight('38.358569,-81.71833;;'));

Re: Apply an onclick function to dynamically created anchor tags

RobertScheitlin__GISP — Fri, 13 Oct 2017 12:42:41 GMT

Mike,

The way I would handle this is in your for look where you are creating the anchor element add the on click handler right there after the anchor is created (not afterwards trying to use dom.byId). Also kr_highlight will have to be a global level function declaration or just an inline function inside your loop where you create your anchors.

Re: Apply an onclick function to dynamically created anchor tags

MikeKoon — Fri, 13 Oct 2017 19:21:12 GMT

Robert Scheitlin, GISP‌

I do have it in the loop but broke it out for clarification. When I create the elements I am actually using but creating dynamically upon user click.

<a id="27" href="#" data-dojo-attach-event="onclick:kr_highlight" value="38.362933,-81.738416;;">

so this works when hard coded in the widget.html.

So, getting this to work with dynamically created anchor tags... Where do I declare the global level function? I assume this is following the module declarations at:

function(declare, html, query, lang, dom, _WidgetsInTemplateMixin, BaseWidget, HorizontalSlider, TextBox, WMSLayer, WMSLayerInfo, Extent, ArcGISDynamicMapServiceLayer, on) {

var clazz = declare([BaseWidget, _WidgetsInTemplateMixin], {
baseClass: 'jimu-widget-inundate',
dynalayer: null,
......
......
kr_highlight: function(latlong) {
}
......
......
});
return clazz;
});

Re: Apply an onclick function to dynamically created anchor tags

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:41:21 GMT

Mike your methodology is still quite a bit different from what I would implement.

Something roughly like this:

define([
    'dojo/_base/declare',
    'dijit/_WidgetsInTemplateMixin',
    'jimu/BaseWidget',
    'dojo/_base/html',
    'esri/tasks/query',
    'dojo/_base/lang',
    'dojo/dom',
    'dojo/dom-construct',
....

],
  function (declare, _WidgetsInTemplateMixin, BaseWidget, html, query, lang, dom, domConstruct, WMSLayer, WMSLayerInfo, Extent, ArcGISDynamicMapServiceLayer, on, HorizontalSlider, TextBox) {

var clazz = declare([BaseWidget, _WidgetsInTemplateMixin], {
baseClass: 'jimu-widget-inundate',
dynalayer: null,

....


for (x in b){
   var link = domConstruct.toDom('<a id="' + x + '" href="#" value="38.362933,-81.738416">' + att.name +'</a>');
   domConstruct.place(link , yourDomNode);
   on(link, 'click', function(){
     //Your kr_highlight function code
   });
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Apply an onclick function to dynamically created anchor tags

MikeKoon — Mon, 16 Oct 2017 15:35:17 GMT

Robert Scheitlin, GISP‌

so I got the inline function to at least find the function, which is great but the "map" object is now not recognized. Here is the code. The last line is where it errors out with "Cannot read property 'centerAndZoom' of undefined". As a note, this did work when the html anchor tags were hard-coded so it has to do with this being created dynamically when the user clicks the "expand" link.

for (x in b){
      strID=c[1].trim();
      strY=c[5].trim();
      strX=c[4].trim();
      strName=c[2].trim();
      var link = domConstruct.toDom('<br><a href=\"#\" id=\"' + strID + '" value=\"' + strY + ',' + strX + '\^">' +    strName    +'</a>');
      console.log(link);
      domConstruct.place(link , currentObj);
      console.log('\"' + c[5].trim() + ',' + c[4].trim() + '^\"');
      alink=dom.byId(c[1].trim());
   on(alink, 'click', function(){
      latlong='38.358569,-81.71833^';
      console.log(latlong);
      //latlong=latlong.srcElement.attributes[1].nodeValue;
      console.log(latlong);
      KR_mapit2=latlong.split("^"); //this splits all

for (var nn = 0; nn < KR_mapit2.length-1; nn++) {
      //alert(jj);
      KR_mapit3=KR_mapit2[nn].split(",");
      y=KR_mapit3[0];
      x=KR_mapit3[1];
      Lat = parseFloat(y);
      Lng = parseFloat(x);
      var pt = new esri.geometry.Point(Lng,Lat, new esri.SpatialReference({wkid:4326})); //4326 is wgs 84
      console.log(pt);

      this.map.centerAndZoom(pt, 13);

Re: Apply an onclick function to dynamically created anchor tags

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:41:24 GMT

Mike,

That is because the scope of "this" is changed inside the inline function. to maintain the scope of "this" you need to use lang.hitch:

on(alink, 'click', lang.hitch(this, function(){
...
}));‍‍‍

Re: Apply an onclick function to dynamically created anchor tags

MikeKoon — Mon, 16 Oct 2017 18:17:03 GMT

rscheitlin‌

It works - Thanks a bunch!