2015-11-15 100 views
0

我正在使用Ruby 2.0.0和Rails 4.2.3。引導下拉菜單在heroku上不起作用

我的引導下拉菜單在heroku上不起作用。我不知道爲什麼? 我已經試過一切,但似乎沒有任何幫助

我的Gemfile

source 'https://rubygems.org' 

gem 'rails', '4.2.3' 
gem 'devise' 
gem 'simple_form' 
gem 'mailboxer' 
gem 'chosen-rails' 
gem 'acts_as_votable', '~> 0.10.0' 
gem 'public_activity' 
gem 'sass-rails', '~> 5.0' 
gem 'uglifier', '>= 1.3.0' 
gem 'coffee-rails', '~> 4.1.0' 
gem 'coffee-script-source', '1.8.0' 
gem 'paperclip', '~> 4.3.0' 
gem 'bootstrap-sass', '~> 3.3.5.1' 
gem "autoprefixer-rails" 
gem 'font-awesome-sass', '~> 4.4.0' 
gem 'jquery-rails' 
gem 'jquery-ui-rails' 
gem 'turbolinks' 
gem 'jbuilder', '~> 2.0' 
gem 'sdoc', '~> 0.4.0', group: :doc 

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

group :development, :test do 
    gem 'sqlite3' 
end 

# gem 'therubyracer', platforms: :ruby 

# 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 

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

的application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files 
// listed below. 
// 
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, 
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path. 
// 
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 
// compiled file. 
// 
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 
// about supported directives. 
// 


//= require bootstrap 
//= require jquery 
//= require jquery_ujs 
//= require chosen-jquery 
//= require turbolinks 
//= require_tree . 




$(document).ready(function(){ 
    $(document).mousemove(function(e){ 
     TweenLite.to($('body'), 
      .5, 
      { css: 
       { 
        backgroundPosition: ""+ parseInt(event.pageX/8) + "px "+parseInt(event.pageY/'12')+"px, "+parseInt(event.pageX/'15')+"px "+parseInt(event.pageY/'15')+"px, "+parseInt(event.pageX/'30')+"px "+parseInt(event.pageY/'30')+"px" 
       } 
      }); 
    }); 


}); 

$(function() { 
    $("#shipment_date").datepicker(); 
}); 

application.html.erb

<!DOCTYPE html> 
<html> 
<head> 
<head> 
    <title>ShiftInd</title> 
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'> 
    <%= stylesheet_link_tag  'application', media: 'all', 'data-turbolinks-track' => true %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 

    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"></link> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
    <%= csrf_meta_tags %> 
</head> 
<body> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <div class="col-md-12"> 
     <a class="navbar-brand" href="/shipments">Shiftind</a> 
     </div> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 


     <ul class="nav navbar-nav navbar-right col-md-3"> 
     <% if user_signed_in? %> 
     <li class="<%= active_page(:inbox) %>"> 
    <%= link_to mailbox_inbox_path do %> 
     <span class="label label-danger pull-right"><%=unread_messages_count%></span> 
     <em class="fa fa-envelope fa-lg"></em> 
    <% end %> 
    </li> 

    <li class="dropdown" > 
     <span class="notification-count" style = "padding: 5px;"><%= @comment.count.inspect %></span> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="notification-count"> 
      <span class="fa fa-bell fa-1x"></span></a> 
      <ul class="dropdown-menu"> 
      <li><% @comment.flatten.each do |c|%> 
       <%= link_to comments_notification_update_path(:comment_id => c.id), :class => "notification" do %><%@user = User.find c.user_id%><%= @user.full_name.capitalize%> added a <i class="fa fa-inr"></i> bid <%= c.content.split(//).first(5).join %>....<% end %><br><br> 
       <% end %> 
      </li>   
      </ul> 
     </li> 

     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><strong><font style="text-transform: capitalize;">Hi, <%= current_user.first_name %></strong></font><span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><%= link_to "Edit Your Details", edit_user_registration_path %></li> 
      <li><%= link_to "Log Out", destroy_user_session_path, method: :get %><li> 
       <% else %> 
       <li><%= link_to "Register", new_user_registration_path %></li> 
       <li><%= link_to "Log in", new_user_session_path %></li> 
       <% end %> 
      </ul> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </nav> 




    <div class="text-center"> 
    <% flash.each do |name, msg| %> 
    <%= content_tag(:div, msg, class: "alert alert-info") %> 
    <% end %> 
    </div> 
    <%= yield %> 

</body> 
</html> 

當我檢查我的瀏覽器的JavaScript控制檯(F12),它顯示了以下錯誤:

Error: Bootstrap's JavaScript requires jQuery application-6de83ae08cb7e1d68e66d4b193a2778e.js:9:9 
GET 
ReferenceError: jQuery is not defined jquery.backstretch.min.js:1:1 
ReferenceError: $ is not defined 

,我只是不知道如何解決這個問題。 有人可以幫助我嗎? 由於事先

+0

嘗試在你的application.js – beydogan

+0

引導之前要求jquery,但沒有任何反應@beydogan –

+0

你有沒有嘗試過:'''// = require bootstrap-sprockets'''? – laertiades

回答

0

,在這兩個發展(CLOUD9)和生產(Heroku的)使我的下拉工作的三個步驟:

1)配置/ initializers.rb,添加:

Rails.application.config.assets.precompile += %w(bootstrap.js) 

2 )應用程序/視圖/ application.html.erb,所述-head-標記內:

<%= javascript_include_tag "bootstrap" if Rails.env.development? %> 

3)應用程序/資產/ Javascript角/ application.js中,刪除行:

//= require bootstrap 

我的操作之前的application.js:

//= require turbolinks 
//= require jquery 
//= require jquery_ujs 
//= require bootstrap 
//= require_tree . 

希望它能幫助,有一個愉快的一天。