Issues with embeding <input type:'number'> into Content of InfoTemplate

JohnRitsko · ‎03-30-2016

OK, still having issues with this. Problem is that the max value can be overwritten if the user types in a value. The maxlength is working fine but the max and min values can be overwritten by user interaction. Is there a way to fix this?

This code resides in my main.js file outside of my index.html page (If that is perhaps a cause).

var PointContent = "Enter Buffer Distance in Miles: <input type='number' value='0.25' min='0.25' max='7' step='0.25' maxlength='5' id='bufferDistancePoint'><br>
<button id='point-button' onclick='findNearby(${OBJECTID})'>Find Projects</button>";
var PointTemplate = new InfoTemplate();
PointTemplate.setContent(PointContent);

RobertScheitlin__GISP · ‎04-03-2016

John,

Your issue was a simple syntax issue (type:'number' instead of type='number')

var PointContent = "Enter Buffer Distance in Miles:" +
      "<input type='number' value='0.25' min='0.1' max='7' step='0.1' maxlength='5' id='bufferDistancePoint'>" +
      "<br><button id='point-button' onclick='findNearby(${OBJECTID})'>Find Projects</button>"

JohnRitsko · ‎04-04-2016

Robert,

I tried that yet it doesn't support the min, max, maxlength. When I put it was type='number' I get the step, min, max values but if something simply removes what in there they can type whatever. Frustrating. I was reading and I believe that it's a supporting browser thing as well if I'm correct in what I'm reading. Chrome Supports the maxlength but nothing else (min, max, step). IE Supports the maxlength but nothing else. Firefox supports the maxlength but nothing else. IS there something I'm doing wrong in order to utilize the min, max, step values?

Thank you so much for the help.

RobertScheitlin__GISP · ‎04-04-2016

John,

Strange I was able to throw together a sample that worked using my corrected syntax with no issue.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <!--
  Apple-Specific Meta Tag Keys
  https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/A...
  -->
  <!-- // Safari iOS apps only -->
  <!-- Sets whether a web application runs in full-screen mode -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <!-- Sets the style of the status bar for a web application -->
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <!-- // Chrome for Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <title>ArcGIS dynamic and tile layers using Popup and InfoTemplates</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
  <style>
    html, body, #ui-esri-map {
      width:   100%;
      height:  100%;
      margin:  0;
      padding: 0;
    }


    #ui-esri-dijit-geocoder {
      top:      20px;
      left:     70px;
      position: absolute;
      z-index:  3;
    }


    .esriPopup .titlePane {
      text-shadow: none;
    }


    .esriPopup .titleButton.next {
      right: 40px;
    }


    .esriPopup .titleButton.prev {
      right: 53px;
    }


    .demographicInfoContent {
      padding-top: 10px;
    }


    .demographicInnerSpacing {
      display: inline-block;
      width:   8px;
    }


    .demographicNumericPadding {
      width:      90px;
      display:    inline-block;
      text-align: right;
    }
  </style>
  <script src="http://js.arcgis.com/3.10/"></script>
  <script>
    var map;
    require([
      "dojo/dom-construct",
      "esri/Color",
      "esri/dijit/Geocoder",
      "esri/dijit/Popup",
      "esri/InfoTemplate",


      "esri/layers/ArcGISDynamicMapServiceLayer",
      "esri/map",
      "esri/symbols/SimpleFillSymbol",
      "esri/symbols/SimpleLineSymbol", "dojo/domReady!"
    ], function(
      domConstruct, Color, Geocoder, Popup, InfoTemplate,
      ArcGISDynamicMapServiceLayer, Map, SimpleFillSymbol, SimpleLineSymbol
    ) {
      var sls = new SimpleLineSymbol("solid", new Color("#444444"), 3);
      var sfs = new SimpleFillSymbol("solid", sls, new Color([68, 68, 68, 0.25]));


      var popup = new Popup({
        fillSymbol: sfs,
        lineSymbol: null,
        markerSymbol: null
      }, domConstruct.create("div"));


      map = new Map("ui-esri-map", {
        basemap: "topo",
        center: [-94.75290067627297, 39.034671990514816], // long, lat
        zoom: 12,
        sliderStyle: "small",
        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_40_49:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 40 - 49<br>" +
        "<div class='demographicNumericPadding'>${AGE_65_UP:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 65 and older" +
        "</div>";


      // var PointContent = "Enter Buffer Distance in Miles: <input type:'number' value='0.25' min='0.1' max='7' step='0.1' maxlength='5' id='bufferDistancePoint'><br>
      //   <button id='point-button' onclick='findNearby(${OBJECTID})'>Find Projects</button>";
      //   var PointTemplate = new InfoTemplate();
      //   PointTemplate.setContent(PointContent);


      _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 _oilAndGasInfoTemplate = new InfoTemplate();
      _oilAndGasInfoTemplate.setTitle("<b>Oil and Gas data</b>");


      var _oilAndGasInfoContent = "Enter Buffer Distance in Miles:" +
      //"<input type='number' name='quantity' min='0.1' max='7' value='0.25' step='0.1'>" +
      "<input type='number' value='0.25' min='0.1' max='7' step='0.1' maxlength='5' id='bufferDistancePoint'>" +
      "<br><button id='point-button' onclick='findNearby(${OBJECTID})'>Find Projects</button>";
        // "<div class=\"demographicInfoContent\">" +
        // "Gas production: ${PROD_GAS}<br>Oil production: ${PROD_OIL:formatNumber}" +
        // "</div>";


      _oilAndGasInfoTemplate.setContent("${FIELD_NAME} production field<br>" +
        _oilAndGasInfoContent);


      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);


      var oilAndGasLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServ...", {
        "id": "oilAndGasLayer",
        "opacity": 0.75
      });
      oilAndGasLayer.setInfoTemplates({
        0: { infoTemplate: _oilAndGasInfoTemplate }
      });
      map.addLayer(oilAndGasLayer);


      geocoder.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";
      }
    };
  </script>
</head>
<body>
<div id="ui-esri-map"></div>
<div id="ui-esri-dijit-geocoder"></div>
</body>
</html>

JohnRitsko · ‎04-04-2016

Robert,

I embed it in the content portion of an InfoTemplate. Perhaps that's my issue.

var CMWGPointContent = "<b><u>${PROJECT_NAME}</u></b> " +

" <br><b>Project Status: </b>${PROJECT_STATUS} " +

" <br><b>Construction Type: </b>${CONSTR_TYPE} " +                            

" <br><b>Design Start:</b> ${EST_DESIGN_START:DateString(hideTime: true)} " +

" <br><b>Design End:</b> ${EST_DESIGN_END:DateString(hideTime: true)} " +

" <br><b>Construction Start:</b> ${ACTUAL_CONSTR_START:DateString(hideTime: true)} " +

" <br><b>Construction End:</b> ${EST_CONSTR_END:DateString(hideTime: true)} " + 

" <br><b>Owner: </b>${OWNER} " +

" <br><b>Contact Name: </b>${PROJECT_CONTACT_NAME} " +

    " <br><b>Contact Phone: </b>${PROJECT_CONTACT_PHONE} " +

" <br><hr><b>Find Nearby Projects</b> " +

" <br>Enter Buffer Distance in Miles: <input type='number' value='0.25' min='0.25' max='7' step='0.25' maxlength='5' id='bufferDistancePoint'> " +

" <br><button id='point-button' onclick='findNearby(${OBJECTID})'>Find Projects</button>";

var CMWGPointTemplate = new InfoTemplate();

CMWGPointTemplate.setContent(CMWGPointContent);