Connect/disconnect event listener based on display of HTML element

4337
4
Jump to solution
05-19-2015 07:37 AM
RyanSellman
Occasional Contributor II

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

0 Kudos
1 Solution

Accepted Solutions
thejuskambi
Occasional Contributor III

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

View solution in original post

4 Replies
RobertScheitlin__GISP
MVP Emeritus

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);
  }
}
RyanSellman
Occasional Contributor II

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

0 Kudos
thejuskambi
Occasional Contributor III

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

RyanSellman
Occasional Contributor II

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

Thank you both for your help!

0 Kudos