AnsweredAssumed Answered

Error: Tried to register widget with id==buildingSelect but that id is already registered

Question asked by dean.frickey on Mar 10, 2016
Latest reply on Mar 17, 2016 by dean.frickey

I have created a simple application that uses QueryTask to search a layer for building.  I am using the FilteringSelect dijit to populate a <select> element with the data returned from the search.  The application works.

 

In the working code, I did not use data-dojo-type="dijit/form/FilteringSelect" in my <select> element but then decided I should add it (although I'm not sure what it's doing for me other than allowing me to add some placeholder text by adding the data-dojo-props="placeHolder: 'Find a Building'" attribute to the <select> tag).  After I do this, I get the following error.

 

error_msg.jpg

 

I've spent quite a bit of time searching the web, including GeoNet, for a solution.  I am not the first person to see this error, but I can't see how to implement the solutions I've found since the reported problems are not quite the same.

 

I've also used the Chrome debugger but with no success in identifying the problem.  I understand that the id should be unique in the document, and it is, until I add the data-dojo-type="dijit/form/FilteringSelect".  I'm not sure how, or where, or why for that matter, it's creating a new one.  I've attempted giving my existing element a new id and modifying the other code that references it, but that doesn't help.  Anything I do that removes the error message creates a new problem in that the code no longer populates the dijit.

 

Here's the HTML snippet.

<select id="buildingSelect" data-dojo-type="dijit/form/FilteringSelect" data-dojo-props="placeHolder: 'Find a Building'"></select>

 

I can also use an <input> element instead of the <select> but the results are the same.

 

Here's the JS I use to populate the <select> element.

 

function loadResults(results) {

  var bldg_dsp,

    values=[],

    selectedID=[],

    features = results.features;

 

  dojo.forEach(features, function(feature) {

    bldg_dsp = feature.attributes.BuildingName + "   (" + feature.attributes.BuildingID + ")";

    bldg_id = feature.attributes.BuildingID;

    values.push({"name": bldg_dsp,"id": bldg_id});

  });

 

  var store = new Memory({data:values});

 

  var fs = new FilteringSelect({

    //id: "buildingSelect", // It seems to make no difference if I use this or not.

   searchAttr: "name",

    labelAttr: "name",

    value: "id",

    queryExpr: "*${0}*",

    store: store,

    searchDelay: "800",

    autoComplete: true

  }, "buildingSelect").startup(); // .startup() seems optional

 

  dojo.connect(dijit.byId("buildingSelect"),"onChange",getBuilding);

  dijit.byId("buildingSelect").focus();

}

 

I am new to developing with the ArcGIS JavaScript API, and Dojo, and would appreciate any suggestions as to how I can resolve this error.  Or if I should just not use the data-dojo-type code that's causing the error.

 

Thanks.

Outcomes