jQRangeSlider
jQRangeSlider copied to clipboard
ghusse
this.cache.parent.offset is null Bug
I am using jQEditRange-min.js
Copyright (C) Guillaume Gautreau 2012
Dual licensed under the MIT or GPL Version 2 licenses.
I am getting an error in the following line of code in the jqEditRange slider. It's the only place in the code that refers to
this.cache.parent.offset.left;
Whenever it hits this line it throws an error because this.cache.parent.offset is null at that point.
I modified the line to be: _getValueForPosition:function(a){this.options.isLeft||(a+=this.cache.width.outer);var left = 0; try{left = a-this.cache.parent.offset.left;}catch(ex){console.log(ex);} return this._constraintValue((left)/this.cache.parent.width*(this.options.bounds.max-this.options.bounds.min)+this.options.bounds.min)}
I am using the slider inside of a filter like control. So whenever the data changes, I pretty much wipe out the old control and put a new slider with a new min and max for the new data.
Can you try to use the same component and just change its values ?
You can use this code:
// Change bounds
$("#slider").editRangeSlider("bounds", {min:newMin, max:newMax} );
$("#slider").editRangeSlider("values", {min: newMinValue, max: newMaxValues});
Tell me if it's fixing your issue.
More questions:
Do you have this error when creating the component, or when changing values? Are you creating the slider inside a hidden container (or container to be shown)?
I'm getting the same behavior on latest release:
https://github.com/ghusse/jQRangeSlider/commit/c4a8d223d6b88dfc5eee456c5f778e6d9abe4939
TypeError: this.cache is null
http://localhost:8080/js/vendor/jQRangeSliderDraggable.js
Line 102
Jquery: 1.9.1 Jquery UI: 1.9.1 jQRangeSlider: 5.4.0
My code:
<script src="js/vendor/jquery-ui.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/vendor/jQRangeSliderMouseTouch.js"></script>
<script src="js/vendor/jQRangeSliderDraggable.js"></script>
<script src="js/vendor/jQRangeSliderHandle.js"></script>
<script src="js/vendor/jQRangeSliderBar.js"></script>
<script src="js/vendor/jQRangeSliderLabel.js"></script>
<script src="js/vendor/jQRangeSlider.js"></script>
<script src="js/vendor/jQDateRangeSlider.js"></script>
<script src="js/vendor/jQDateRangeSliderHandle.js"></script>
Relevant Javascript:
<script>
// load the date range slider
jQuery("#slider").dateRangeSlider();
// setting this option throws the caching error
jQuery("#slider").dateRangeSlider("option", "bounds",
{
min: new Date(2012, 0, 1),
max: new Date(2012, 11, 31)
});
</script>
Callstack:
_applyPosition(position=0)
_superApply()
_applyPosition(left=0)
_superApply()
_position(value=1297382400000)
_superApply()
_setOption(key="isLeft", value=true)
_superApply()
_setOption(key="isLeft", value=true)
_superApply()
_setOptions(options=Object { isLeft=true})
option(key="isLeft", value=true)
(?)()
each(obj=Object[div.ui-rangeSlider-handle], callback=function(), args=undefined)
each(callback=function(), args=undefined)
bridge(options="option")
_handleProxy(element=Object[div.ui-rangeSlider-handle], args=Object { 0="option", 1="isLeft", 2=true})
_superApply()
_leftHandle()
_superApply()
_switchHandles()
_superApply()
_onDragLeftHandle(event=Object { type="moving", timeStamp=1382614896255, jQuery19102487410193017494=true, mais...}, ui=Object { element={...}, offset={...}, value=1325376000000})
_superApply()
anonymous()
dispatch(event=Object { type="moving", timeStamp=1382614896255, jQuery19102487410193017494=true, mais...})
handle(e=Object { type="moving", timeStamp=1382614896255, jQuery19102487410193017494=true, mais...})
trigger(event=Object { type="moving", timeStamp=1382614896255, jQuery19102487410193017494=true, mais...}, data=[Object { type="moving", timeStamp=1382614896255, jQuery19102487410193017494=true, mais...}, Object { element={...}, offset={...}, value=1325376000000}], elem=div.ui-rangeSlider-handle, onlyHandlers=undefined)
trigger()
each(obj=Object[div.ui-rangeSlider-handle], callback=function(), args=undefined)
each(callback=function(), args=undefined)
trigger(type="moving", data=Object { element={...}, offset={...}, value=1325376000000})
_triggerMouseEvent(event="moving")
_superApply()
_applyPosition(left=652.1666870117188)
_superApply()
_position(value=1325376000000)
_superApply()
update()
_superApply()
update()
_superApply()
_setOption(key="bounds", value=Object { min=1325376000000, max=1356912000000})
_superApply()
_setOption(key="bounds", value=Object { min=1325376000000, max=1356912000000})
_superApply()
_setOptions(options=Object { bounds={...}})
option(key="bounds", value=Object { min=1325376000000, max=1356912000000})
(?)()
each(obj=Object[div.ui-rangeSlider-handle], callback=function(), args=undefined)
each(callback=function(), args=undefined)
bridge(options="option")
_proxy(element=Object[div.ui-rangeSlider-handle], type="dateRangeSliderHandle", args=Object { 0="option", 1="bounds", 2={...}})
_superApply()
_leftHandle()
_superApply()
_setBounds(min=1325376000000, max=1356912000000)
_superApply()
bounds(min=1325376000000, max=1356912000000)
_superApply()
bounds(min=1325376000000, max=1356912000000)
_superApply()
_setBoundsOption(key="bounds", value=Object { min=1325376000000, max=1356912000000})
_superApply()
_setOption(key="bounds", value=Object { min=1325376000000, max=1356912000000})
_superApply()
_setOption(key="bounds", value=Object { min=Date, max=Date})
_superApply()
_setOptions(options=Object { bounds={...}})
option(key="bounds", value=Object { min=Date, max=Date})
option(key="bounds")
_superApply()
(?)()
each(obj=Object[div#slider.ui-rangeSlider], callback=function(), args=undefined)
each(callback=function(), args=undefined)
bridge(options="option")
()
@ghusse thanks ! Feel free to poke me if you need anything, like testing. Am not deep in the code so i could not send a patch but i sent as much info on the bug report as i could ;-)
For time being, adding a "null" check for "this.cache.parent.offset" is fixing this issue. I'm still working on on the root cause.
