将jQuery添加到Rails，“滑块不是函数”

Question

I'm trying to add a simple slider to my rails app. 我正在尝试向Rails应用添加一个简单的滑块。

my .js.coffee file 我的.js.coffee文件

jQuery ->
  $("#slider").slider()

I'm still getting an error 我仍然有错误

TypeError: $("#slider").slider is not a function

I think it's connected with adding jquery to rails. 我认为这与将jquery添加到rails有关。

My gemfile 我的宝石文件

source 'https://rubygems.org'
gem 'rails', '3.2.8'

group :development, :test do
  gem 'mysql2'
  gem 'haml'
  gem 'haml-rails'
  gem 'devise'
  gem 'paperclip'
  gem 'mailcatcher'
  gem 'squeel'
  gem 'nested_form'
  gem 'kaminari'
  gem 'simple_form'
  gem 'ransack'
  gem 'delayed_job_active_record'
  gem 'capybara'
  gem 'launchy'
  gem 'rspec-rails'
end

group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'

  gem 'uglifier', '>= 1.0.3'
end

gem 'jquery-rails'

application.js 的application.js

//= require jquery
//= require jquery_ujs
//= require_tree .
//= require jquery_nested_form

head section in application.html.haml application.html.haml中的头部

    = stylesheet_link_tag    "application", :media => "all"
    = javascript_include_tag "application"
    = csrf_meta_tags

page source 页面源

<!DOCTYPE html>
<html>
  <head>
    <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
    <link href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" type="text/css" />
    <link href="/assets/styles.css?body=1" media="all" rel="stylesheet" type="text/css" />
    <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
    <script src="/assets/home.js?body=1" type="text/javascript"></script>
    <script src="/assets/offers.js?body=1" type="text/javascript"></script>
    <script src="/assets/transactions.js?body=1" type="text/javascript"></script>
    <script src="/assets/transports.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery_nested_form.js?body=1" type="text/javascript"></script>
    <script src="/assets/application.js?body=1" type="text/javascript"></script>
    <meta content="authenticity_token" name="csrf-param" />
    <meta content="aATz55lG9w8tzTcmRhj8/F2m6pYcFHDupUlwVW4fw/E=" name="csrf-token" />
  </head>
  <body>
    <div id='site'>
      <div id='main'>
        <div id='top'>
          <div class='wrapper'>
             <a href='index.html.haml'></a>
            </div>
            <div id='top_menu'>
              <a href="/">Home</a>
              <a href="/regulations">Regulation</a>
              <a href="/faqs">FAQ</a>
              <a href="contact">Contact</a>
              <br>
              <div class='add'>
                <a href="/users/sign_out" data-method="destroy" rel="nofollow">Logout</a>
                <a href="/choose">Add offer</a>
                <a href="/offers">Offeers</a>
                <a href="/transactions">Transactions</a>
              </div>
            </div>
          </div>
        </div>
        <div id='content'>
          <div class='wrapper'>
            <h1>New offer</h1>
<form accept-charset="UTF-8" action="/offers" class="simple_form new_offer" enctype="multipart/form-data" id="new_offer" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="aATz55lG9w8tzTcmRhj8/F2m6pYcFHDupUlwVW4fw/E=" /></div>
<label class="string optional control-label" for="offer_Description">Description</label>
<textarea cols="40" id="offer_description" name="offer[description]" rows="8" style="width:90%; height: 80px;">
</textarea>

<div id='slider'></div>

<br>
<div>
  <div>
    <label class="string optional control-label" for="offer_Amount">Amount</label>
    <input id="offer_amount" name="offer[amount]" size="30" type="text" />
  </div>
  <div>
    <label class="string optional control-label" for="offer_Unit">Unit</label>
    <select id="offer_unit" name="offer[unit]"><option value="m3">m3</option>
    <option value="szt">szt</option></select>
  </div>
</div>
<div>
  <div>
    <label class="string optional control-label" for="offer_Price">Price</label>
    <input id="offer_whole_price" name="offer[whole_price]" size="30" type="text" />
  </div>
</div>
<div>
  <label class="string optional control-label" for="offer_Unit price">Unit price</label>
  <input id="offer_unit_price" name="offer[unit_price]" size="30" type="text" />
</div>
<div></div>
<label class="string optional control-label" for="offer_Photos">Photos</label>
<div class='newPaperclipFiles'>
  <div class="fields"><input id="offer_photos_attributes_0_image" name="offer[photos_attributes][0][image]" type="file" />
  <input id="offer_photos_attributes_0__destroy" name="offer[photos_attributes][0][_destroy]" type="hidden" value="false" /><a href="javascript:void(0)" class="remove_nested_fields" data-association="photos">Destroy</a>
  </div>
  <a href="javascript:void(0)" class="add_nested_fields" data-association="photos">Add photo</a>
</div>
<div class='actions'>
  <input name="commit" type="submit" value="Save" />
</div>
</form>
<div id="photos_fields_blueprint" style="display: none"><div class="fields"><input id="offer_photos_attributes_new_photos_image" name="offer[photos_attributes][new_photos][image]" type="file" />
<input id="offer_photos_attributes_new_photos__destroy" name="offer[photos_attributes][new_photos][_destroy]" type="hidden" value="false" /><a href="javascript:void(0)" class="remove_nested_fields" data-association="photos">Usuń</a>
</div></div>
<a href="/offers">Back</a>
          </div>
        </div>
        <div id='fotter'>
        </div>
      </div>
    </div>
  </body>
</html>

Did I miss something? 我错过了什么？

Answer 1

If you are not seeing jQuery linked properly there (you may use Firebug or simply try to open the URL shown in the source to confirm jQuery is loading). 如果您在此处看不到jQuery正确链接（您可以使用Firebug或尝试打开源中显示的URL来确认jQuery正在加载）。

That should help you debug the problem, else please paste your rendered (from browser) HTML source code for the page. 这应该可以帮助您调试问题，否则请为页面粘贴（从浏览器显示的）HTML源代码。

Edit: 编辑：

Sorry, noticed you are using Coffee, try this page for some jQuery + Coffee syntax help: 抱歉，注意到您正在使用Coffee，请尝试此页面以获取jQuery + Coffee语法帮助：

http://aaronrussell.co.uk/articles/using-coffeescript-with-jquery/ http://aaronrussell.co.uk/articles/using-coffeescript-with-jquery/

将jQuery添加到Rails，“滑块不是函数”

问题描述

1 个解决方案

解决方案1
1 已采纳 2012-10-03 11:24:21

将jQuery添加到Rails，“滑块不是函数”

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-10-03 11:24:21

解决方案1
1 已采纳 2012-10-03 11:24:21