Rails上的“未定义不是函数”

时间:2014-06-05 08:10:45

标签: javascript jquery ruby-on-rails slider nouislider

我正在研究我的Ruby on Railsproject,我正在尝试使用noUislider,我也使用Big Picture html模板。但是我继续遇到" Undefined不是一个函数"

The error picture from chrome

这是我的application.js文件。我现在正在使用colorPicker示例作为测试。 我非常确定我按正确的顺序包含了jQuery。

//= require jquery-1.10.2
//= require jquery-ui-1.10.4
//= require jquery_ujs
//= require jquery.poptrox.min
//= require skel.min
//= require init
//= require jquery.nouislider
//= require Link
//= require_tree .


// On document ready, initialize noUiSlider.


$(function(){
    $('.slider').noUiSlider({
        start: 127,
        connect: "lower",
        orientation: "vertical",
        range: {
            'min': 0,
            'max': 255
        },
        serialization: {
            format: {
                decimals: 0
            }
        }
    });


    function setColor() {

        // Get the slider values,
        // stick them together.
        var color = 'rgb(' +
            $("#red").val() + ',' +
            $("#green").val() + ',' +
            $("#blue").val() +
            ')';

        // Fill the color box.
        $(".result").css({
            background: color,
            color: color
        });
    }

// Bind the color changing function
// to the slide event.
$('.slider').on('slide', setColor);
});

这里是index.html.erb文件

<div id="controller_main" class="content box style2 light_controller">
<ul class="lights_list">
  <li id="light1" class="lights">
    <span>Light 1</span></br>
    <div class="slider light_image"></div>
    <div class="slider" id="red"></div>
    <div class="slider" id="green"></div>
    <div class="slider" id="blue"></div>
</li>
</ul>

</div>

我在这个问题上花了10多个小时,所以有人请救我.....我需要这个工作尽快。

如果我需要提供其他任何内容以解决问题,请告诉我。

修改 我删除整个项目而不是使用scaffold我只是创建一个控制器和一个名为index的视图,并将模板代码放入其中。它有效。但是,我仍然不知道它为什么以前没有工作。使用模板也是如此痛苦,因为你必须将它集成到rails中,并且一些路径是内部的硬代码,并且不可能使其完全发挥作用。

1 个答案:

答案 0 :(得分:0)

来自http://api.jquery.com/jQuery.noConflict/。尝试使用此

jQuery.noConflict();
(function( $ ) {
    $(function() {
        $('.slider').noUiSlider({
            start: 127,
            connect: "lower",
            orientation: "vertical",
            range: {
                'min': 0,
                'max': 255
            },
            serialization: {
                format: {
                    decimals: 0
                }
            }
        });
        // the rest of your code
    });
})(jQuery);