1

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:

# Bundle edge Rails instead:
# gem 'rails',     :git => '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',   '~> 3.1.4'
  gem 'coffee-rails', '~> 3.1.1'
  gem 'uglifier', '>= 1.0.3'
  gem 'foundation-rails'
  gem 'jquery-ui-rails'
end

Here is application.js:

//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require foundation
//= require_tree .

$(function(){ $(document).foundation(); });

Here is application.css:

/*
 * 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
 */

I have a page that includes the following code:

    <ul id='sortable_list'>
      <% @list.items.each do |item| %>
        <li><%=item.name%></li>
      <%end%>
    </ul>

  </div>
</div>

<script>

  $(function() {
    $( "#sortable_list" ).sortable();
    $( "#sortable_list" ).disableSelection();
  });
</script>

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!

MikeC
  • 480
  • 6
  • 14
  • you've left out part of your application.css. – sevenseacat Nov 27 '13 at 04:00
  • OK, I put in the whole application.css. – MikeC Nov 27 '13 at 11:15
  • Call jQuery instead of $ and it will work. See another post here: https://stackoverflow.com/questions/53836843/trying-to-load-slick-carousel-into-foundation-6-5/53856287#53856287 where I link to Foundation forum and show an example of how to do it. – Nathaniel Flick Dec 19 '18 at 19:55

1 Answers1

0

OK, so the issue was the current version of Foundation (5.0.2). The documentation says that its script tag should be placed right before the closing tag. I put my script_tag for application.js there and, apparently, jQuery likes to be loaded in the head. So I moved //= require foundation out of application.js, moved <%= javascript_include_tag "application" %> back to the head, and added <%= javascript_include_tag "foundation" %> by itself at the bottom of the document. I figure this will work until they fix the bug in 5.0.2 that requires that it be loaded at the end of the body.

MikeC
  • 480
  • 6
  • 14