nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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?

Vind meer berichten getagd met

Accepted answers

JamesVillanueva

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.

All comments

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

JeffPace1

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

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.

JeffPace1

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?

TyroneLigon

Maybe I'm missing something here, but couldn't you just hide the time slider's div when you don't need it instead of destroying it? If you need to change any time slider parameters, change them, run "timeSlider.startup()", then show the time slider's div.

DorothyMortenson

I have run with this idea and have a working solution.

I have loaded the timeslider to the start of the application, but keep the theme turned off until the user selects a radio button.

This will work - I just didn't want to load the thing unless someone really wanted it.

Seemed I just couldn't actually grab the timeSlider itself - only the container. But it's mute for the moment. So, I'm still on the lookout for a good "destroy" example. If anyone comes across this later, please add it to this post.

Thank you all for your help and quick replies. I really appreciate it.

DorothyMortenson

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

got the same result, wit hthe new name.

JeffPace1

you can try scoping your timeSlider to a global variable. The easiest way i found to do that is (sample from a custom full extent button)

var customFullExtent = function customFullExtent() {
map.centerAndZoom(initialCenter, initialLevel);
};
//create as global variable so you can call from HTML
lang.setObject("customFullExtent", customFullExtent);

then I can call

customFullExtent() from anywhere

Anonymous User

I'm having the same issue with the Editor widget

Anonymous User

Dorothy if this helps, it turns out I needed to search for my widget in one DIV higher up, and then destroy from there:

var thing2 = on(stopEdit, "click", function destroyEditor() {
 if (dom.byId("editDivDyn") != null) { //This is the dynamic DIV where I put the Editor widget
  var widgets = registry.findWidgets(editPane_pane); // This is one DIV upwards from where the dynamic DIV is placed
                 if (widgets) {
   arrayUtils.forEach(widgets, function(w) {
    w.destroyRecursive(false); //Destroys widget and dynamic DOM node
    w=null;
   });
  }
 }
});

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.