Connect/disconnect event listener based on display of HTML element

[RyanSellman]

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

[RobertScheitlin__GISP]

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]

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

[thejuskambi · Accepted solution]

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

[RyanSellman]

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

Thank you both for your help!