Esri API JS, popup not displaying after first click

Question

Demographics data shows upon first click but not after, park information does work. I've changed around almost everything with non real solution. I feel like for whatever reason my feature server data is preferred over the dynamiclayer in the map. Is there a way to make the js bounce based on where you click?

    var map;

    require([
      "esri/config",
      "esri/InfoTemplate",
      "esri/map",
      "esri/dijit/Popup",
      "esri/dijit/PopupTemplate",
      "esri/geometry/Extent",
      "esri/layers/ArcGISDynamicMapServiceLayer",
      "esri/layers/FeatureLayer",
      "esri/layers/ArcGISTiledMapServiceLayer",
      "esri/symbols/SimpleFillSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/tasks/GeometryService",
      "esri/tasks/query",
      "dojo/dom-construct",
      "dojo/dom-class",
      "dojo/parser",
      "esri/Color",
      "dojo/_base/lang",
      "dojo/date/locale",
      "esri/dijit/Geocoder",
      "esri/dijit/LocateButton",      
      "dojo/domReady!"
    ],
      function (
        esriConfig, InfoTemplate, Map, Popup, PopupTemplate, Extent, ArcGISDynamicMapServiceLayer, FeatureLayer, 
        ArcGISTiledMapServiceLayer, SimpleFillSymbol, SimpleLineSymbol,
        GeometryService, Query, domConstruct, domClass, parser, Color, lang, locale, Geocoder, LocateButton 
      ) {

        parser.parse();


        var popup = new Popup({
          fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
              new Color([0, 0, 0]), 2), new Color([128, 128, 128, 0.25]))
        }, domConstruct.create("div"));

        domClass.add(popup.domNode, "myTheme");

        map = new Map("map", { 
          basemap: "topo",
          center: [-122.402, 47],
          zoom: 9,
          infoWindow: popup          
        });

        var geocoder = new Geocoder({
        arcgisGeocoder: {
          placeholder: "Search "
        },
        map: map
      }, "ui-esri-dijit-geocoder");

      var _countyCensusInfoTemplate = new InfoTemplate();
      _countyCensusInfoTemplate.setTitle("<b>Census Information</b>");

      var _blockGroupInfoTemplate = new InfoTemplate();
      _blockGroupInfoTemplate.setTitle("<b>Census Information</b>");

      var _censusInfoContent =
        "<div class=\"demographicInfoContent\">" +
        "<div class='demographicNumericPadding'>${AGE_5_17:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 5 - 17<br>" +
        "<div class='demographicNumericPadding'>${AGE_18_21:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 18 - 21<br>" +
        "<div class='demographicNumericPadding'>${AGE_22_29:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 22 - 29<br>" +
        "<div class='demographicNumericPadding'>${AGE_30_39:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 30 - 39<br>" +
        "<div class='demographicNumericPadding'>${AGE_40_49:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 40 - 49<br>" +
        "<div class='demographicNumericPadding'>${AGE_50_64:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 50 - 64<br>" +
        "<div class='demographicNumericPadding'>${AGE_65_UP:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 65 and older" +
        "</div>";

      _countyCensusInfoTemplate.setContent("Demographics for:<br>${NAME} ${STATE_NAME:getCounty}, ${STATE_NAME}<br>" + _censusInfoContent);
      _blockGroupInfoTemplate.setContent("Demographics for:<br>Tract: ${TRACT:formatNumber} Blockgroup: ${BLKGRP}<br>" + _censusInfoContent);      

      var demographicsLayerURL = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer";
      var demographicsLayerOptions = {
        "id": "demographicsLayer",
        "opacity": 0.8,
        "showAttribution": false
      };

      var demographicsLayer = new ArcGISDynamicMapServiceLayer(demographicsLayerURL, demographicsLayerOptions);
      demographicsLayer.setInfoTemplates({
        1: { infoTemplate: _blockGroupInfoTemplate },
        2: { infoTemplate: _countyCensusInfoTemplate }
      });
      demographicsLayer.setVisibleLayers([1, 2]);
      map.addLayer(demographicsLayer);

      geocoder.startup();

      var geoLocate = new LocateButton({
      map: map,
      highlightLocation: false
      }, "LocateButton"
      );
      geoLocate.startup();

    var formatNumber = function(value, key, data) {
      var searchText = "" + value;
      var formattedString = searchText.replace(/(\d)(?=(\d\d\d)+(?!\d))/gm, "$1,");
      return formattedString;
    };

    var getCounty = function(value, key, data) {
      if (value.toUpperCase() !== "LOUISIANA") {
        return "County";
      } else {
        return "Parish";
      }
    };

        map.on("click", function (event) {
          var query = new Query();
          query.geometry = pointToExtent(map, event.mapPoint, 10);
          var deferred = featureLayer.selectFeatures(query,
            FeatureLayer.SELECTION_NEW);
          map.infoWindow.setFeatures([deferred]);
          map.infoWindow.show(event.mapPoint);
        }); 

      var template = new InfoTemplate();
        template.setTitle("Park Information");
        template.setContent(getTextContent);

        var featureLayer = new FeatureLayer("https://services3.arcgis.com/J1Locv0GPOt6yBRR/ArcGIS/rest/services/Parks_polygons_Feb2012/FeatureServer/0",
          {            
            outFields: ["*"],
            infoTemplate: template
          });

        map.addLayer(featureLayer);

        function getTextContent (graphic) {
          var attributes = graphic.attributes;
          var namepark =
            attributes.ParkName
            .replace('"', "")
            .split("::")
            .map(function (name) {
              return lang.trim(name);
            });

          var parkdata = namepark[0];
          var commonName = namepark[1];
          var parks;

          if (commonName) {
            parks = "<b>" + commonName + "</b><br/>" +
                          "<i>" + parkdata + "</i>";
          }
          else {
            parks = "<i>" + parkdata + "</i>";
          }

          return  parks + "<br>" +
                  attributes.Owner + "<br>" + 
                  attributes.ParkWebLin 
        }        

        function pointToExtent (map, point, toleranceInPixel) {
          var pixelWidth = map.extent.getWidth() / map.width;
          var toleranceInMapCoords = toleranceInPixel * pixelWidth;
          return new Extent(point.x - toleranceInMapCoords,
                            point.y - toleranceInMapCoords,
                            point.x + toleranceInMapCoords,
                            point.y + toleranceInMapCoords,
                            map.spatialReference);
        }    

      });
  </script>
</head>

<body class="claro">
  <div id="map">
  <div id="LocateButton"></div>
</div>
<div id="ui-esri-dijit-geocoder"></div>

</body>

link to is http://students.washington.edu/sbuffor/combined_census_parks.html

Answer 1

I started removing pieces and found a piece that I didn't completely understand what it was doing and pulled it out.

map.on("click", function (event) {
          var query = new Query();
          query.geometry = pointToExtent(map, event.mapPoint, 10);
          var deferred = featureLayer.selectFeatures(query,
            FeatureLayer.SELECTION_NEW);
          map.infoWindow.setFeatures([deferred]);
          map.infoWindow.show(event.mapPoint);
        }); 

Upon doing this the map now is completely operational!

Also I took the advice to add the URL to the park info, got that added in as well, although I did remove the "getTextContent" piece out of it to get it to render properly but it works quite well. I also added another piece to open the link in a new tab.