Add jquery to rails, “slider is not a function”

Question

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="&#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).

That should help you debug the problem, else please paste your rendered (from browser) HTML source code for the page.

Edit:

Sorry, noticed you are using Coffee, try this page for some jQuery + Coffee syntax help:

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

Add jquery to rails, “slider is not a function”

Question

1 answers

solution1
1 ACCPTED 2012-10-03 11:24:21

Add jquery to rails, “slider is not a function”

Question

1 answers

solution1 1 ACCPTED 2012-10-03 11:24:21

solution1
1 ACCPTED 2012-10-03 11:24:21