javascript - jquerydateRangeslider 中的 jQuery "Uncaught TypeError"

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 与原型(prototype)结合使用 - 适用于我的原型(prototype)代码，但 jquery 部分出现同样的错误。

引用/使用的链接:

1. jQuery Uncaught TypeError: Object[object Object] has no method slider
2. Uncaught TypeError: Object [object Object] has no method "fancybox"
3. jQuery's jquery-1.10.2.min.map is triggering a 404 (Not Found)

更新:

-在尝试了index.gsp代码并解决jquery冲突并只保留一份副本之后，我现在已经成功打印了dateslider，但我也在使用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 之前并将原型(prototype)推到顶部，这使得日期 slider 工作。但现在，highcharts 也有同样的问题，我通过以下方式访问，这就是错误所在:

  $j(函数 () { $j('#container1').highcharts({

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

Answer 1

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

尝试$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);