我正在尝试向我的 Rails 应用程序添加一个简单的 slider 。
我的 .js.coffee 文件
jQuery ->
$("#slider").slider()
我仍然收到错误
TypeError: $("#slider").slider is not a function
我认为这与将jquery添加到rails有关。
我的 gem 文件
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
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require jquery_nested_form
application.html.haml 中的头部
= stylesheet_link_tag "application", :media => "all"
= javascript_include_tag "application"
= csrf_meta_tags
页面来源
<!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="✓" /><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>
我错过了什么吗？
最佳答案
如果您没有看到 jQuery 正确链接(您可以使用 Firebug 或只是尝试打开源代码中显示的 URL 以确认 jQuery 正在加载)。
这应该可以帮助您调试问题，否则请粘贴您渲染的(从浏览器)页面的 HTML 源代码。
编辑:
抱歉，注意到您正在使用 Coffee，请尝试此页面获取一些 jQuery + Coffee 语法帮助:
http://aaronrussell.co.uk/articles/using-coffeescript-with-jquery/
关于jquery - 将jquery添加到rails中， "slider is not a function"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12707374/