2014-06-05 111 views
0

我正在研究Ruby on Rails項目,並試圖使用noUislider,我也使用Big Picture html模板。但是我一直運行到「未定義是不是一個函數」「Undefined不是函數」on Rails

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個小時對這個問題,所以有人請救救我吧.....我想這能儘快制定。

請讓我知道如果還有什麼我需要提供,以解決這個問題。

編輯: 我刪除整個項目,而不是使用腳手架我只是創造一個控制器和視圖稱爲索引,並把模板代碼內。它的工作原理。不過,我仍然不知道爲什麼它不工作。同樣使用這個模板是非常痛苦的,因爲你必須將它集成到rails中,並且一些路徑是內部的硬編碼,並且不可能使其充分發揮作用。

+2

它的失敗在你init.js它不能在你的application.js – Pete

+0

所以,也許是因爲init.js失敗導致的application.js錯誤之前? – CocoHot

回答

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); 
相關問題