选择的 Jquery 在 Rails 4 应用程序上无法正常工作

Question

我正在使用 Mailboxer 和 Chosen gem。用户可以从下拉菜单中选择多个用户。问题是，在初始加载时，下拉菜单似乎已经打开，并且只允许您选择一个其他用户。如果我重新加载页面，下拉菜单会按原样显示。

当我在 chrome 检查器中检查它时，我收到 TypeError: undefined is not a function 错误。我检查了 S.O 和谷歌，很多建议是更改我的 application.js 文件的顺序。我已经尝试过了，但无法在初始启动时正确触发。查看我的终端窗口，每个请求似乎都成功通过。

Dropdown on initial load, broken

Dropdown w/ refresh working properly

所以它确实有效，但为什么我必须刷新页面才能使其正常工作？

Application.js：

    ...
//
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require chosen-jquery
//= require bootstrap
//= require jquery.image-select
//= require messages
//= require turbolinks

application.css.scss：

... 
 *
 *= require_tree .
 *= require_self
 */

@import 'bootstrap';
@import 'bootstrap/theme';
@import 'chosen';
...

messages.coffee：

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
jQuery ->
  $('.chosen-it').chosen()

宝石文件：

source 'https://rubygems.org'
ruby '2.1.5'


gem 'rails', '4.2.0'

gem 'devise'
gem 'thin'
gem "simple_calendar"

gem 'bootstrap-sass'
gem 'bootstrap-will_paginate'

gem "mailboxer"

gem 'will_paginate' 

gem 'gravatar_image_tag'

group :development do
  gem 'sqlite3'
  gem 'better_errors'
  gem 'binding_of_caller'
  gem 'annotate'
end

group :production do
  gem 'pg'
  gem 'rails_12factor'
end

gem 'chosen-rails'
gem 'sass-rails', '~> 4.0.5'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer',  platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
gem 'jquery-turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0',          group: :doc


#gem 'sass-rails', '4.0.4'

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# Use debugger
# gem 'debugger', group: [:development, :test]

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin]

违规文件，home.html.erb：

<div class="box">
    <div class="col-lg-12 text-center">
        <div id="carousel-example-generic" class="carousel slide">
            <!-- Indicators -->
            <ol class="carousel-indicators hidden-xs">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <%= image_tag "slide-1.jpg", :class => "img-responsive img-full" %>
                </div>
                <div class="item">
                    <%= image_tag "slide-2.jpg", :class => "img-responsive img-full" %>
                </div>
                <div class="item">
                    <%= image_tag "slide-5.jpg", :class => "img-responsive img-full" %>
                </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
            <span class="icon-next"></span>
        </a>
</div>
            <h2 class="brand-before">
                <small>Welcome to</small>
            </h2>
            <h1 class="brand-name">Balern Education</h1>
            <hr class="tagline-divider">

        </div>
    </div>
</div>

    <div class="box">
        <hr>

        <hr>
            <%= image_tag "intro1.jpg", :class => "img-responsive img-border img-left" %>
            <hr class="visible-xs">

    </div>

    <div class="box">
        <hr>
        <h2 class="intro-text text-center">Balern really
            <strong>Cares</strong>
        </h2>
        <hr>

    </div>    <!-- /.container -->

<!-- jQuery -->
<script src="assets/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="assets/bootstrap.min.js"></script>

<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
    interval: 5000 //changes the speed
})
</script>

Answer 1

尝试禁用 turbolinks。如果它开始正常工作，您要么想从项目中删除 turbolink，要么安装 jquery-turbolinks gem

Answer 2

我认为问题出在我输入一段代码的方式上。我仍然不太确定如何正确执行此操作，所以如果有人能告诉我这会有所帮助...

<!-- jQuery -->
<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
    interval: 5000 //changes the speed
})
</script>

我在我的一个视图页面中有这个。我认为问题是这不应该出现在视图中？

这就是导致我选择的表单和下拉菜单失灵的原因