I'm trying to add a simple slider to my rails app.
my .js.coffee file
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.
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
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require jquery_nested_form
head section in 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="✓" /><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?
