jQuery "Uncaught TypeError" in jquerydateRangeslider

目前正在构建一个grails应用程序，我正在使用jQuerydaterangeslider，并在我的控制台遇到这个错误(显然许多人以前都遇到过)

Error : Uncaught TypeError: Object [object Object] has no method 'dateRangeSlider'

另外，在我的网络选项卡中，错误:

jquery-10.1.2.min.map is not found

我在网上检查并理解这个问题可能主要在于有多个jquery被调用，它之间的冲突或其他js库。我也在使用prototype.js，所以这个冲突也是存在的。我已经使用noConflict()删除了这个错误，但错误仍然访问

I tried

删除所有，只有一个jquery库(10.1.2或10.1.2。
。noConflict with prototype -适用于我的原型代码，但在jquery部分有相同的错误。

引用/使用的链接:

jQuery Uncaught TypeError: Object[Object Object] has no method slider
Uncaught TypeError: Object [Object Object] has no method "fancybox"
jquery # 39; s jquery-1.10.2.min。地图正在触发404(未找到)

更新:

-在处理索引之后。gsp代码和周围的jquery冲突移动，只保留一个副本，我已经设法打印日期滑块现在，但我也使用highcharts和新的错误如下:

Uncaught TypeError: Object [object Object] has no method 'highcharts'

现在是完全一样的

新索引。gsp代码:

<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"/>

控制台输出:

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

是定义jquery的位置。noconflict重要?我将它移到jquery之前，并将原型推到顶部，这使日期滑块工作。但是现在，highcharts有同样的问题，我通过以下方式访问，这就是错误所在:
$j(function () {$ j (# container1) .highcharts ({

任何想法都将受到高度赞赏!

第一;不要添加两次jQuery，删除最下面的那个。然后;不要使用$("something").dateRangeSlider，因为$是你添加的覆盖jQuery的prototype.js $.

Try $j().dataRangeSlider or jQuery.dateRangeSlider .

在安装了firebug的Chrome或firefox中，您可以使用F12打开developer tools/firebug。在控制台选项卡中，您可以粘贴JavaScript命令并查看其输出

console.log("$.fn.jquery for version:",$.fn  && $.fn.jquery);
console.log("$.fn.dateRangeSlider:",$.fn && jQuery.fn.dateRangeSlider);
console.log("jQuery.fn for verson:",jQuery.fn && jQuery.fn.jquery);
console.log("jQuery.fn dateRangeSlider",jQuery.fn && jQuery.fn.dateRangeSlider);
console.log("$j fn jquery",$j.fn  && $j.fn.jquery);
console.log("$j fn dateRangeSlider:",$j.fn && $j.fn.dateRangeSlider);

使用索引。以下形式的GSP帮助解决了daterangeslider和highcharts的问题。

非常感谢HMR，调试帮助。

索引。GSP:

<g:javascript src="d3.v3.min.js"/>
<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"/>
<script>
var $j = jQuery.noConflict();
</script>
<link rel="stylesheet" href="${resource(dir: 'css', file: 'iThing.css')}" type="text/css">
<link rel="stylesheet" href="css/iThing.css" type="text/css" /> 
<link rel="stylesheet" href="${resource(dir: 'css', file: 'bootstrap.min.css')}" type="text/css">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'dc.css')}" type="text/css">
<style type="text/css"></style>
<g:javascript src="prototype.js"/>
<g:javascript src="highcharts.js"/>
<g:javascript src="exporting.js"/>

相关内容

最新更新

热门标签：