Multiple Time Sliders on Same Page. Bug?

[Anonymous User]

Original User: mmoyles

I'm running into a problem using the TimeSlider dijit in the esri dojo package. I am using multiple timesliders on multiple maps on the same page. (See screenshot for better view on what I'm trying to do)

The error I'm getting is 'Tried to register widget with id==ts but that id is already registered' which has lead me to believe that the ESRI programmer who worked on this hardcoded an id somewhere in the templated time slider widget. Is the source available anywhere for me to fix the bug myself? Or does anyone have any ideas for a work around? (short of creating my own timeslider widget)

I'm setting up my timeslider like so:

template html file:
.....
<div data-dojo-attach-point="timeSliderDiv" class="center"></div>
.....

javascript view: (initSlider is an event handler called after all layers have been loading via map.addLayers(arrayOfLayers) )

dojo.declare('app.views.SimulationsView', [ dijit._Widget, dijit._Templated ], {      templateString: dojo.cache('app.views', 'Simulations/view.html'),     title: 'View Simulation',     closable: true,     data: false,     widgetsInTemplate: true,  //...................... initSlider: function(results) {         var _this = this;         console.log('initialize time slider');                  var timeLayer;         dojo.forEach(results, function(result) {             if(result.layer.id = 'Hospitals') { //not sure if this is the best layer to pull time extent from?                 timeLayer = result.layer;             }         });                  var timeSlider = new esri.dijit.TimeSlider({             id: 'TimeSlider' + _this.data.id,             style: "width: 100%;"         }, _this.timeSliderDiv);                  _this.map.setTimeSlider(timeSlider);         timeSlider.setThumbCount(1);                  dojo.connect(timeSlider, 'onTimeExtentChange', _this, _this.onTimeExtentChange);                  if(timeLayer && timeLayer.timeInfo) {                             var layerTimeExtent = timeLayer.timeInfo.timeExtent;             timeSlider.createTimeStopsByTimeInterval(layerTimeExtent, 10, 'esriTimeUnitsMinutes');             timeSlider.setThumbMovingRate(2000);             timeSlider.singleThumbAsTimeInstant(true);             timeSlider.setLoop(true);             timeSlider.startup();                    } else {                    alert('Could not load simulation MapService layers. You may need to re-crunch this simulation.');        }                      },  //......................  });

[ATTACH=CONFIG]12286[/ATTACH][ATTACH=CONFIG]12287[/ATTACH]

[derekswingley1]

You are right and this is a bug�?? the time slider is hard coded to create a div with id="ts".

How about this for a work around:  can you create and destroy your time sliders as needed? Instead of creating them all when the app loads, create the one you need initially and when someone does something to switch to a different map or time slider, destroy the existing one and create a new one. Destroy a time slider by calling timeSlider.destroy().

[Anonymous User]

Original User: mmoyles

I think that should work Derek. I can kill all time sliders and recreate one attaching to the onShow event of my ContentPane.

Any idea if this bug will be fixed in version 2.8?

[derekswingley1]

Thanks for being open to the workaround.

Any idea if this bug will be fixed in version 2.8?

We'll try, but it's too early to give a guarantee. We're pushing to get 2.8 out for the dev summit.

[Anonymous User]

Original User: mmoyles

I was able to un-minify the TimeSlider.js code and make the change myself actually. I couldn't bring myself to start destroying/creating timesliders on the fly like that. I updated the code and fixed the bug. I can post the code here if it is allowed for others experiencing this bug. Basically I just changed the hard-coded id to an attach-point.

[derekswingley1]

I was able to un-minify the TimeSlider.js code and make the change myself actually. I couldn't bring myself to start destroying/creating timesliders on the fly like that. I updated the code and fixed the bug. I can post the code here if it is allowed for others experiencing this bug. Basically I just changed the hard-coded id to an attach-point.

Yes, please do. Others might find it helpful.

[Anonymous User · Accepted solution]

Original User: mmoyles

I've changed the namespace. Place this file in /js/app/widgets.

Add it to you app with dojo.require('app.widgets.TempaltedTimeSlider')

There is no html template neccessary the _Widget.templateString is hardcoded in.

When you initialize the timeslider use new app.widgets.TemplatedTimeSlider({}) or declaratively data-dojo-type="app.widgets.TemplatedTimeSlider"

Enjoy!

(Note: This is a little bit of a hackjob and has not been thoroughly tested.)

Code here: http://www.pastie.org/3489637

EDIT: I should add that you need to map the app module path, if you have not already done so in your application.

dojoConfig = {         baseUrl : './',         modulePaths : {             app : "js/app"         }     };