title: jquery-ui, Foundation, and Rails 3.1 not playing well together
body: <p>I have a Rails 3.1 app that uses the foundation-rails gem and the jquery-rails gem and everything seems to be working.  I tried to add the jquery-ui-rails gem to the mix and ran bundle install and everything looks good.  Here is the relevant part of my gemfile:</p>
  
  <pre><code># Bundle edge Rails instead:
  # gem 'rails',     :git =&gt; 'git://github.com/rails/rails.git'
  
  gem 'sqlite3'
  gem 'mysql2'
  gem 'devise'
  gem 'omniauth'
  gem 'omniauth-facebook', '1.4.0'
  gem 'omniauth-google-oauth2'
  gem 'jquery-rails'
  
  gem 'json'
  
  # Gems used only for assets and not required
  # in production environments by default.
  group :assets do
    gem 'sass-rails',   '~&gt; 3.1.4'
    gem 'coffee-rails', '~&gt; 3.1.1'
    gem 'uglifier', '&gt;= 1.0.3'
    gem 'foundation-rails'
    gem 'jquery-ui-rails'
  end
  </code></pre>
  
  <p>Here is application.js:</p>
  
  <pre><code>//= require jquery
  //= require jquery_ujs
  //= require jquery.ui.all
  //= require foundation
  //= require_tree .
  
  $(function(){ $(document).foundation(); });
  </code></pre>
  
  <p>Here is application.css:</p>
  
  <pre><code>/*
   * This is a manifest file that'll automatically include all the stylesheets available in this directory
   * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
   * the top of the compiled file, but it's generally better to create a new file per style scope.
   *= require_self
   *= require foundation_and_overrides
  
   *= require_tree . 
  */
  
  /*
   *= require jquery.ui.all
   */
  </code></pre>
  
  <p>I have a page that includes the following code:</p>
  
  <pre><code>    &lt;ul id='sortable_list'&gt;
        &lt;% @list.items.each do |item| %&gt;
          &lt;li&gt;&lt;%=item.name%&gt;&lt;/li&gt;
        &lt;%end%&gt;
      &lt;/ul&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  
    $(function() {
      $( "#sortable_list" ).sortable();
      $( "#sortable_list" ).disableSelection();
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>The list is not sortable when the page loads and I get a "Uncaught ReferenceError: $ is not defined".  I'm at my wits end - help, please!</p>