Currently building a grails application here and I am using jQuerydaterangeslider and facing this error (which clearly many have faced before) in my console
Error : Uncaught TypeError: Object [object Object] has no method 'dateRangeSlider'
Also, in my network tab, error :
jquery-10.1.2.min.map is not found
I checked online and understood the problem could lie in mainly having multiple jquery being called and it's conflict among themselves or other js libraries. I am also using prototype.js, so this conflict is also there. I had already removed this using noConflict(), still the error persits
I tried
- Removing all and having only one jquery library (either 10.1.2 or 10.1.2.min or only ui-10.1.4) - none worked
- using jquery.noConflict with prototype - Works for my prototype code, but same error in jquery part.
Links referred/used :
- jQuery Uncaught TypeError: Object[object Object] has no method slider
- Uncaught TypeError: Object [object Object] has no method "fancybox"
- jQuery's jquery-1.10.2.min.map is triggering a 404 (Not Found)
UPDATE :
-After playing around with the index.gsp codes and shifting around the jquery conflict and keeping only one copy, I have managed to print the dateslider now, but I am also using highcharts and the new error is as follows :
Uncaught TypeError: Object [object Object] has no method 'highcharts'
Which is exactly same now,
New index.gsp code:
<g:javascript src="d3.v3.min.js"/>
<g:javascript src="highcharts.js"/>
<g:javascript src="exporting.js"/>
<g:javascript src="prototype.js"/>
<script>
var $j = jQuery.noConflict();
</script>
<g:javascript src="jQuery-ui-1.10.4.custom.js"/>
<g:javascript src="jQDateRangeSlider-min.js"/>
<g:javascript src="jQDateRangeSlider-withRuler-min.js"/>
<g:javascript src="jQRangeSliderLabel.js"/>
Output of console :
console.log("$.fn.jquery for version:",$.fn && $.fn.jquery);
$.fn.jquery for version: undefined VM33:2
undefined
console.log("$.fn.dateRangeSlider:",$.fn && jQuery.fn.dateRangeSlider);
$.fn.dateRangeSlider: undefined VM34:2
undefined
console.log("jQuery.fn for verson:",jQuery.fn && jQuery.fn.jquery);
jQuery.fn for verson: 1.10.2 VM35:2
undefined
console.log("jQuery.fn dateRangeSlider",jQuery.fn && jQuery.fn.dateRangeSlider);
jQuery.fn dateRangeSlider function ( options ) {
var isMethodCall = typeof options === "string",
args = slice.call( arguments, 1 ),
returnValue = this;
// allow multiple hashes to be passed on init
options = !isMethodCall && args.length ?
$.widget.extend.apply( null, [ options ].concat(args) ) :
options;
if ( isMethodCall ) {
this.each(function() {
var methodValue,
instance = $.data( this, fullName );
if ( !instance ) {
return $.error( "cannot call methods on " + name + " prior to initialization; " +
"attempted to call method '" + options + "'" );
}
if ( !$.isFunction( instance[options] ) || options.charAt( 0 ) === "_" ) {
return $.error( "no such method '" + options + "' for " + name + " widget instance" );
}
methodValue = instance[ options ].apply( instance, args );
if ( methodValue !== instance && methodValue !== undefined ) {
returnValue = methodValue && methodValue.jquery ?
returnValue.pushStack( methodValue.get() ) :
methodValue;
return false;
}
});
} else {
this.each(function() {
var instance = $.data( this, fullName );
if ( instance ) {
instance.option( options || {} )._init();
} else {
$.data( this, fullName, new object( options, this ) );
}
});
}
return returnValue;
} VM36:2
undefined
console.log("$j fn jquery",$j.fn && $j.fn.jquery);
$j fn jquery 1.10.2 VM37:2
undefined
console.log("$j fn dateRangeSlider:",$j.fn && $j.fn.dateRangeSlider);
$j fn dateRangeSlider: function ( options ) {
var isMethodCall = typeof options === "string",
args = slice.call( arguments, 1 ),
returnValue = this;
// allow multiple hashes to be passed on init
options = !isMethodCall && args.length ?
$.widget.extend.apply( null, [ options ].concat(args) ) :
options;
if ( isMethodCall ) {
this.each(function() {
var methodValue,
instance = $.data( this, fullName );
if ( !instance ) {
return $.error( "cannot call methods on " + name + " prior to initialization; " +
"attempted to call method '" + options + "'" );
}
if ( !$.isFunction( instance[options] ) || options.charAt( 0 ) === "_" ) {
return $.error( "no such method '" + options + "' for " + name + " widget instance" );
}
methodValue = instance[ options ].apply( instance, args );
if ( methodValue !== instance && methodValue !== undefined ) {
returnValue = methodValue && methodValue.jquery ?
returnValue.pushStack( methodValue.get() ) :
methodValue;
return false;
}
});
} else {
this.each(function() {
var instance = $.data( this, fullName );
if ( instance ) {
instance.option( options || {} )._init();
} else {
$.data( this, fullName, new object( options, this ) );
}
});
}
return returnValue;
} VM38:2
undefined
Is the position of defining jquery.noconflict important? I shifted it before jquery and pushed prototype to the top, this got the dateslider working. But now, highcharts has the same problem which I am accessing by the following and this is where the error is :
$j(function () { $j('#container1').highcharts({
Any ideas will be highly appreciated!
