AnsweredAssumed Answered

Uncaught TypeError: Cannot read property 'toLowerCase' of null

Question asked by Sara_EL_MALKI on Apr 28, 2017
Latest reply on Apr 29, 2017 by Sara_EL_MALKI

Hi guys,

this error kills me each time I see it, It's appear so much in the console and I don't have a single idea why !

I'll share with you a part of my code hoping you can guide me, also It gives me another error: TypeError: Cannot read property 'on' of undefined

$( document ).ready(function() {
var map;
require(["esri/map", "esri/tasks/FindTask",
"esri/tasks/FindParameters",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/Color","dgrid/Grid","dgrid/Selection",
"dojo/_base/declare","dojo/on",
"dojo/dom","dijit/registry","dojo/_base/array","dojo/parser", "esri/dijit/Search","esri/layers/FeatureLayer","esri/InfoTemplate","esri/dijit/Legend",
"esri/dijit/LayerList", "dojo/ready","dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dojo/domReady!"], function(Map, FindTask, FindParameters, SimpleLineSymbol, SimpleFillSymbol, Color,Grid, Selection, declare,
on, dom, registry, arrayUtils, parser, Search, FeatureLayer,InfoTemplate, Legend, LayerList, ready) {
ready(function(){
var findTask, findParams;
var center, zoom;
var grid;
parser.parse();

dom.byId("findbutton").on("click", doFind);
center = [-5, 35];
zoom = 8;
map =new esri.Map
"map", {
center: center,
zoom: zoom,
basemap: "satellite"
});

findTask = new FindTask("link to the featureServer/");

// Create a new constructor by mixing in the components
// Allow row selection for the grid
var myGrid = declare([Grid, Selection]);

//columns for the grid
var columns = [
{'field': 'objectid', 'label': "Objet ID"},
{'field': 'nom', 'label': 'Nom'},
{'field': 'ex_nom', 'label': 'Ex nom'},
{'field': 'nature_cha', 'label': 'Nature chaussée'},
{'field': 'sens_circu', 'label': 'Sens circulation', width:"30%"}
];

// Create an instance of Grid
grid = new myGrid({
      columns: columns,
selectionMode: 'single',
    }, 'grid');

grid.on("dgrid-select", onRowClickHandler);

map.on("load", function () {
//Create the find parameters
findParams = new FindParameters();
findParams.returnGeometry = true;
findParams.layerIds = [17]; //VOIRIE
findParams.searchFields = ["nom", "ex_nom"];
findParams.outSpatialReference = map.spatialReference;
console.log("find sr: ", findParams.outSpatialReference);
});

function doFind() {
//Set the search text to the value in the box
var ownerNameBox = dom.byId("findinput"); //ce que l'utilisateur à entrer
findParams.searchText = dom.byId("findinput").value;
findTask.execute(findParams, showResults);
}

function showResults(results) {
//This function works with an array of FindResult that the task returns
map.graphics.clear();
var symbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([98, 194, 204]), 2),
new Color([98, 194, 204, 0.5])
);

//create array of attributes
var items = arrayUtils.map(results, function (result) {
var graphic = result.feature;
graphic.setSymbol(symbol);
map.graphics.add(graphic);
return result.feature.attributes;
});

//display the results in the grid
grid.refresh();
grid.renderArray(items);

//Zoom back to the initial map extent
map.centerAndZoom(center, zoom);
}

//Zoom to the parcel when the user clicks a row
function onRowClickHandler(evt) {
var clickedTaxLotId = event.rows[0].data.objectid;
var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) {
return ((graphic.attributes) && graphic.attributes.objectid === clickedTaxLotId);
});
if ( selectedTaxLot.length ) {
map.setExtent(selectedTaxLot[0].geometry.getExtent(), true);
}
}

var search = new Search({
enableButtonMode: true, //this enables the search widget to display as a single button
enableLabel: false,
enableInfoWindow: true,
showInfoWindowOnSelect: false,
map: map
}, "search");

var sources = search.get("sources");
var featureLayer1 = new FeatureLayer("..../1", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
 

//add the legend
map.on("layers-add-result", function (evt) {
var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
return {layer:layer.layer, title:layer.layer.name};
});
if (layerInfo.length > 0) {
var legendDijit = new Legend({
map: map,
layerInfos:layerInfo
}, "legendDiv");
legendDijit.startup();
}
});

map.addLayers([featureLayer1]);

 

 

var myWidget = new LayerList({
map: map,
layers: [{layer:featureLayer1, title:"Consulats"}],
showLegend: true
}, "layerList");
myWidget.startup();

sources.push({
featureLayer: featureLayer17, //VOIRIE
searchFields: ["objectid"], //Recherche dans les deux champs
displayField: "nom",
exactMatch: false,
outFields: ["objectid", "nom", "ex_nom","nature_cha","sens_circu"],
name: "Voirie",
placeholder: "moulay ali cherif",
maxResults: 6,
maxSuggestions: 6,

//Create an InfoTemplate and include three fields
infoTemplate: new InfoTemplate("VOIRIE", "objectid: ${objectid}</br>Nom: ${nom}</br>l'Ex nom: ${ex_nom}<br/>nature chaussée:${nature_cha}<br/>sens circulation:${sens_circu}"),
enableSuggestions: true,
minCharacters: 3
});

//Set the sources above to the search widget
search.set("sources", sources);

search.startup();

})
});

});
and this is a part of my HTML
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Rechercher:</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<input type="text" name="findinput" id="findinput" class="form-control col-md-10" placeholder="nom/Ex nom" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">annuler</button>
<button type="button" class="btn btn-primary" id="findbutton">rechercher</button>
</div>
MY code JavaScript is at the end of the page.

Outcomes