Question

目前在这里构建一个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（）删除了它，但错误仍然存在

我试过

删除所有并且只有一个jquery库（10.1.2或10.1.2.min或仅ui-10.1.4） - 无效
将jquery.noConflict与原型一起使用 - 为我的原型代码工作，但在jquery部分中使用相同的错误。

引用/使用的链接：

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)

更新：

- 在使用index.gsp代码并转移jquery冲突并仅保留一个副本之后，我已经设法现在打印了datelider，但我也使用了highcharts，新错误如下：

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

现在完全相同，

新的index.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之前将它移动并将原型推到顶部，这使得datelider正常工作。但是现在，highcharts遇到了同样的问题，我正在通过以下方式访问，这就是错误所在的地方：

$ j（function（）{ $Ĵ（ '＃container1'）。highcharts（{

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

Answer 1

首先;不要两次添加jQuery，删除底部的jQuery。然后;不要使用$("something").dateRangeSlider，因为$是您添加的prototype.js，用于覆盖jQuery $。

尝试$j().dataRangeSlider或jQuery.dateRangeSlider。

在安装了firebug的Chrome或firefox中，您可以使用F12打开开发人员工具/ 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);

Answer 2

使用以下形式的index.gsp有助于解决daterangeslider和highcharts的问题。

非常感谢HMR，调试帮助了。

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

jQuery dateRangeslider中的jQuery“Uncaught TypeError”

2 个答案: