JS API Toggle Pop-Up On & Off

Question

I am attempting to allow for the pop-up to be toggled on and off by pressing a checkbox. Here are some snippets of the code:

var clickHandler

function popupOn(evt){
var query = new esri.tasks.Query();
query.geometry = pointToExtent(map,evt.mapPoint,10);
var deferred = featureLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW);
map.infoWindow.setFeatures([deferred]);
map.infoWindow.show(evt.mapPoint);
}

function clickConnect(connect){
if(connect){
//perform the identify task on click 
clickHandler = dojo.connect(map, "onClick", popupOn);
}
else{
//disconnect the click handler 
dojo.disconnect(clickHandler);
clickHandler = null;
}
}

<input type='checkbox' data-dojo-type="dijit.form.CheckBox" checked="checked" data-dojo-props="onClick: dojo.connect('true')"/><label>Tick here to turn selecting on.</label><br/>

Answer 1

Well, there are a bunch of things wrong with this.

1) You're firing "dojo.connect('true')" whenever the checkbox is checked, which does nothing. The first argument to dojo.connect should be an object and the second argument should be the name of an event to listen for. Given the fact that you've defined a "clickConnect" event anyway, it seems like you intended to execute this function whenever the box is checked. In that case, you'd want:

<input type='checkbox' data-dojo-type="dijit.form.CheckBox" checked="checked" data-dojo-props="onClick: clickConnect(true)"/>

...however, this means that any time the checkbox is clicked (regardless of whether or not it's checked), you're creating a new onClick event handler for the map. Not only is this redundant, but you're also never executing the else block of your clickConnect function, since you're always passing true as the argument.

2) It's unclear what your intention really is. Are you trying to allow the checkbox to toggle the InfoWindow itself on or off, or do you want the checkbox to control whether or not an InfoWindow will appear when a user clicks the map?

My guess is that when a user clicks on the map, unless the checkbox is unchecked, you always want to execute a query and display the results in an InfoWindow. I also assume you want any existing InfoWindow to disappear whenever you uncheck the checkbox. Given these assumptions, the following code should work (although it is untested):

var clickHandler;

function popupOn(evt){
    var query = new esri.tasks.Query();
    query.geometry = pointToExtent(map,evt.mapPoint,10);
    var deferred = featureLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW);
    map.infoWindow.setFeatures([deferred]);
    map.infoWindow.show(evt.mapPoint);
}

function clickConnect(connect){
    if(connect){
        clickHandler = dojo.connect(map, "onClick", popupOn);
    } else {
        //disconnect the click handler 
        dojo.disconnect(clickHandler);
        clickHandler = null;
    }
}

function checkboxClicked(checkbox) {
    if (checkbox && checkbox.checked) {
        clickConnect(true);
    } else {
        map.infoWindow.hide();
        clickConnect(false);
    }
}

// Call clickConnect(true) after the map loads (assumes 'map' is your JS API map object):
dojo.connect(map, "onLoad", function(){ clickConnect(true); });

....

<input type='checkbox' data-dojo-type="dijit.form.CheckBox" checked="checked" data-dojo-props="onClick: function() { checkboxClicked(this); }"/><label>Tick here to turn selecting on.</label><br/>