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

[DeanFrickey]

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.

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.

[DeanFrickey · Accepted solution]

I figured out what I was doing wrong, so I thought I would update this post.

As soon as I added the data-dojo-type="dijit/form/FilteringSelect" to the <select> element, dojo would create an element with the same id as the <select> element.  Since I also created a FilteringSelect object in my code, this caused an error.  In order to eliminate the error while using the data-dojo-type I needed to remove this section of code.

  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

and in it's place, add these lines, in order to set the properties in the buildingSelect object.

dijit.byId("buildingSelect").store = store;

dijit.byId("buildingSelect").queryExpr = "*${0}*";

dijit.byId("buildingSelect").searchDelay = "800";

dijit.byId("buildingSelect").autoComplete = true;