0

私は Ruby on Railsproject に取り組んでいて、noUislider を使用しようとしていて、Big Picture html テンプレートも使用しています。ただし、「未定義は関数ではありません」に遭遇し続けます

クロムからのエラー画像

これが私の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 というビューを作成し、テンプレート コードを内部に配置します。そして、それは機能します。しかし、なぜそれが以前に機能しなかったのかはまだわかりません。また、テンプレートをレールに統合する必要があり、パスの一部が内部でハードコードされており、完全に機能させることができないため、テンプレートを使用するのは非常に困難です。

4

1 に答える 1

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);
于 2014-06-05T12:39:17.297 に答える