jquery-ui、Foundation 和 Rails 3.1 不能很好地配合使用答案

【问题标题】：jquery-ui, Foundation, and Rails 3.1 not playing well togetherjquery-ui、Foundation 和 Rails 3.1 不能很好地配合使用
【发布时间】：2013-12-12 13:16:47
【问题描述】：

我有一个使用基础导轨 gem 和 jquery-rails gem 的 Rails 3.1 应用程序，一切似乎都在工作。我尝试将 jquery-ui-rails gem 添加到组合中并运行 bundle install ，一切看起来都不错。这是我的 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

这里是 application.js：

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

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

这里是 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
 */

我有一个包含以下代码的页面：

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

页面加载时列表不可排序，我收到“未捕获的引用错误：$ 未定义”。我已经束手无策了——请帮忙！

【问题讨论】：

您遗漏了部分 application.css。
好的，我把整个application.css放进去。
调用 jQuery 而不是 $ 就可以了。在此处查看另一篇帖子：stackoverflow.com/questions/53836843/… 我链接到 Foundation 论坛并展示了如何执行此操作的示例。

标签： ruby-on-rails jquery-ui ruby-on-rails-3.1 zurb-foundation

【解决方案1】：

好的，所以问题是当前版本的 Foundation (5.0.2)。文档说它的脚本标签应该放在结束标签之前。我将 application.js 的 script_tag 放在那里，显然 jQuery 喜欢加载到头部。所以我将//= require foundation移出application.js，将<%= javascript_include_tag "application" %>移回头部，并在文档底部单独添加<%= javascript_include_tag "foundation" %>。我认为这将一直有效，直到他们修复了 5.0.2 中要求在正文末尾加载它的错误。

【讨论】：