Tried to register widget with id==timeSliderDiv but that id is already registered

[DorothyMortenson]

Hello.
I have a button that triggers the timeSlider.  It works great.
Then I have a button to clear it - turn off the layer and empty the slider.
When I click the button for the timeSlider again, I get this error:

Tried to register widget with id==timeSliderDiv but that id is already registered

I realize it's trying to initiate the slider again, but I can't seem to properly destroy and redo it on the fly.

functrion wrTime(){
...
       timeLayer = new FeatureLayer("http://arcgis.wrd.state.or.us/arcgis/rest/services/Dynamic/wr_qry_Time/MapServer/0",
       {mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
        id:"time_layer"
       });
        map.addLayers([timeLayer]);

      
      connect.connect(map,'layer-add-result', initSlider());
      
      function initSlider() {
          var timeSlider = new TimeSlider({
            style: "width: 100%;"
          }, dom.byId("timeSliderDiv"));
          map.setTimeSlider(timeSlider);
          var timeExtent = new TimeExtent();
          timeExtent.startTime = new Date("1/1/1900 UTC");
          timeExtent.endTime = new Date("12/31/2014 UTC");
          timeSlider.setThumbCount(2);
          timeSlider.createTimeStopsByTimeInterval(timeExtent, 2, "esriTimeUnitsYears");
          timeSlider.setThumbIndexes([0,200]);
          timeSlider.startup();
}

function clearTime(){      
      // === Turns the theme off ===
      timeLayer.hide();
      //===== eliminates the element ====
      var element = document.getElementById("timeSliderDiv");
      element.outerHTML = "";
      delete element;
}

I've tried various versions of destroy,  registry.remove, etc.  Then tried recreating the timeSliderDiv, but I am just not getting it right.

Mostly, I just want it to appear as if it cleared. If you were to show the slider, I don't care if it refreshes or picks up where it left off.  No matter how I slice it, tho, I keep ending up with the same error message. 

Suggestions?

[JamesVillanueva]

try grabbijng the following dojo classes:

    "dojo/dom-construct"
    "dijit/registry"

    I name them when I pull them in:
   
    domConstruct
    registry


    then do something like:

           //get grid
          var component = registry.byId("myComponentId");
         
          //if it exists
          if (component)
          {
            //destroy it
            domConstruct.destroy(component);
          }

[JeffPace]

enigma is right, and you were on the right track. The problem is you are destroying the dom element, not the registered dijit

you should be destroying the "timeSlider" from the registry, not the div is exists in

domConstruct doesnt always work in my experience

you should try

timeSlider.destroy()
or
registry.remove(timeSlider)

[DorothyMortenson]

Something isn't quite right yet.

The timeSlider is within a function.  The clear is in another function.  So it cannot find the timeSlider in the clear function.

function initSlider() {
          var timeSlider = new TimeSlider({
            style: "width: 100%;"
          }, dom.byId("timeSliderDiv"));
...

function clearTime(){
   ...
   registry.remove(timeSlider);

That's one way.
=============================

The other way I've tried is:
function initSlider() {
       registry.remove(timeSlider);
          var timeSlider = new TimeSlider({
            style: "width: 100%;"
          }, dom.byId("timeSliderDiv"));

I get the Tried to register widget with id==timeSliderDiv ... error.

Thanks for your help.
Dorothy

[JamesVillanueva]

Find it using registry in the same function you're trying to destroy it in.

var component = registry.byId("myComponentId");

[DorothyMortenson]

I did this:

function clearTime(){
...

 var component = registry.byId("timeSlider");
    registry.remove(component);

}

I still get the same error as " Tried to register widget with id==timeSliderDiv but that id is already registered"

==================
In a separate test, I did this:

function initSlider() {
        var component = registry.byId("timeSlider");
        alert(component);
       //if it exists
       if (component)
           {
             registry.remove(component);
         }       
       
          var timeSlider = new TimeSlider({
            style: "width: 100%;"
          }, dom.byId("timeSliderDiv"));
           ...

The alert comes back "undefined", both the first time (expected) and the second time (not expected).
I get the same error message "Tried to register..."

[JamesVillanueva · Accepted solution]

In your code above, I didn't see you assign the timeslider an id.

var timeSlider = new TimeSlider({id:"timeSlider"},dom.byId("timeSliderDiv"));

Did you do this in your code? If not, you need to assign it an Id.

[DorothyMortenson]

No, I didn't have an id.

I did add it, per your suggestion.

I'm getting a similar error. 

"Tried to register widget with id==timeSlider but that id is already registered"

Now it's pointing to the ID and not the timeSliderDiv

[JamesVillanueva]

Try to register the TimeSlider with a different id and destroy it with that new Id.

[JeffPace]

Is it actually doing the remove? I.e. if you call registry.byId('timeSlider') are you getting a result?

after the remove, if you call it again, are you getting null?