topic Re: Connect/disconnect event listener based on display of HTML element in ArcGIS JavaScript Maps SDK Questions

Connect/disconnect event listener based on display of HTML element

RyanSellman — Sun, 12 Dec 2021 01:20:20 GMT

In my application, I would like for an event listener to be hooked up upon the display of an HTML element. Right now, I have a button that basically toggles the display of an element. I would like to hook up a click event on the map, only when that element is showing. So, when the user clicks a button after the application loads, the element's display is set to "block" and the handler is wired up. Then, if the user hits the button again, the display is set back to, "none" and the handler is disconnected.

I have to believe there is a better way to handle this, so I am open to changing the logic all together. Regardless, here is what I have so far:

function toggleGeovista() {

  var geovistaElement = document.getElementById('geovistaWidget');


  if (geovistaElement.style.display == 'block') {

  geovistaElement.style.display = 'none';

  } else {

  geovistaElement.style.display = 'block';
  }


  //hook up map click listener based on the display of geovistaElement 
  var geovistaDisplay = geovistaElement.style.display;

  if (geovistaDisplay == 'block') {

  alert("Geovista Widget is showing");

  //var eventHandler = map.on("click", openGeovistaWidget);
  var eventHandler = connect.connect(map, "onClick", openGeovistaWidget);

  } else if (geovistaDisplay == 'none') {

  alert("Geovista Widget is NOT showing");

  //eventHandler.remove();
  connect.disconnect(eventHandler);

  }
  }

I have tried using the "on" method for handling events as well as the dojo/_base/connect module. In both approaches, I can get the listener to connect but cannot disconnect it.

Any help is appreciated!

Ryan

Re: Connect/disconnect event listener based on display of HTML element

RobertScheitlin__GISP — Sun, 12 Dec 2021 01:20:23 GMT

Ryan,

This is how I would do it:

function toggleGeovista() { 
  var clickListener;
  var geovistaElement = document.getElementById('geovistaWidget');
  if (geovistaElement.style.display == 'block') { 
    geovistaElement.style.display = 'none';
    if(clickListener){
      clickListener.remove();
    }
  } else { 
    geovistaElement.style.display = 'block';
    clickListener = map.on('click', openGeovistaWidget);
  }
}

Re: Connect/disconnect event listener based on display of HTML element

RyanSellman — Sun, 12 Dec 2021 01:20:26 GMT

Robert,

Thanks for the reply. Still no luck with the code you supplied. The listener gets hooked up but its not disconnecting when the element's display is flipped to "none".

Here's what you gave me along with the function I am calling with the map click:

function toggleGeovista() { 
   var clickListener;
   var geovistaElement = document.getElementById('geovistaWidget');
  if (geovistaElement.style.display == 'block') { 
  geovistaElement.style.display = 'none';
  if(clickListener){
   clickListener.remove();
  }
  } else { 
  geovistaElement.style.display = 'block';
  clickListener = map.on('click', openGeovistaWidget);
  }
  }

  function openGeovistaWidget(evt) {
  alert("GVM Function starting");
                    var point = evt.mapPoint;
                    var outSR = new SpatialReference(4326);


                    gvsc.project([point], outSR, function(projectedPoints) {
                        pt = projectedPoints[0];
                        window.open("http://fiscalims.summitoh.net/GVViewer/ViewerAX.htm?res=2&lat=" + pt.y.toFixed(5) + "&lon=" + pt.x.toFixed(5));


                    });

  }

Ill try to get a public link set up. Maybe seeing the app will help.

Thanks for the help.

Ryan

Re: Connect/disconnect event listener based on display of HTML element

thejuskambi — Tue, 19 May 2015 15:24:48 GMT

the variable clickListener has to be outside the method. as the reference will be gone when the on click event is raised.

Re: Connect/disconnect event listener based on display of HTML element

RyanSellman — Tue, 19 May 2015 15:39:35 GMT

Thanks for the reply! Moving the clickListener variable outside of the function seems to have fixed it.

Thank you both for your help!