2015-11-12 118 views
0

我已經引導安裝在我的Rails應用程序,一切工作正常本地計算機上,但只要我把它在Heroku上的下拉和jQuery日期選擇器插件停止工作引導下拉菜單不工作在Heroku

我的代碼

的Gemfile

source 'https://rubygems.org' 


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails' 
gem 'rails', '4.2.3' 
# Use sqlite3 as the database for Active Record 
group :production do 
    gem 'pg' 
    gem 'rails_12factor' 
end 
group :development, :test do 
    gem 'sqlite3' 
end 

gem 'devise' 
gem 'simple_form' 
gem 'mailboxer' 
gem 'chosen-rails' 
gem 'acts_as_votable', '~> 0.10.0' 
gem 'public_activity' 
# Use SCSS for stylesheets 
gem 'sass-rails', '~> 5.0' 
# Use Uglifier as compressor for JavaScript assets 
gem 'uglifier', '>= 1.3.0' 
# Use CoffeeScript for .coffee assets and views 
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 "font-awesome-rails" 
# See https://github.com/rails/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' 
# 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 

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

aplication.html.erb

<!DOCTYPE html> 
<html> 
<head> 
    <title>ShiftInd</title> 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'> 
    <%= javascript_include_tag "application" %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
    <link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" rel="stylesheet"></link> 
    <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"> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/ 
libs/jquery/1.4/jquery.min.js" 
></script> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/assets/style.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> 

aplication.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(); 
}); 

我試過很多東西,但沒有任何幫助。任何幫助將很好,預先感謝。

+0

你可以做'heroku run rake assets:precompile'嗎? – sadaf2605

+0

是的,但它似乎並沒有工作.... @ sadaf2605 –

回答

1

你應該至少兩件事情:停止加載重複的文件(CDN與創業板相結合),並重新組織application.js文件,以便引導之後jQuery的需要。

您application.html.erb的<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 %> 
    <%= csrf_meta_tags %> 
</head> 

使用jQuery UI的例外,你媒體鏈接有一個創業板加載這些文件,其中一些有重複也來自CDN。你應該使用@import將你自己的樣式表添加到application.scss

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"></link> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
<link rel="stylesheet" href="/assets/style.css"> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

您正在使用CDN提取文件,同時也使用GEM來實現相同的文件(jQuery/Font Awesome等)。

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] 

這是你的Gemfile的新版本作爲參考來使用:我改變了你沒有做,但一般可以幫助幾件事情:

引導需要使用Autoprefixer。 Autoprefixer使用我可以使用的值將供應商 前綴添加到CSS規則。

  • 新增Jquery-UI寶石(您也可以使用CDN如果你想,這僅僅是另一種選擇。原始文件下面參考)

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    

在您的應用程序。 js,Bootstrap需要在jQuery之後。請參閱Docs

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

這是一個示例application.scss。

@import "bootstrap-sprockets"; 
@import "bootstrap"; 
@import "font-awesome-sprockets"; 
@import "font-awesome"; 
@import "jquery-ui"; 
@import 'style'; 

*您style.css,需要改變以style.scss

+1

謝謝先生,但作爲新的鐵軌可以請詳細說明我需要刪除,以完成這項工作@vanburen –

+0

我照你說的做,但它不起作用,還有一件事沒有文件名爲assets.css @vanburen –

+0

您是否在更改後再次運行捆綁包或捆綁更新?我真的不知道還有什麼要告訴你,然後發佈它與Heroku託管的網址。它應該是資產文件夾內的style.css。 – vanburen

0

舊線,我知道,但是從我所看到的,答案是推到Heroku的前手動預編譯。我經過了大量的搜索後做了這個,並且爲我工作。

$ RAILS_ENV=production bundle exec rake assets:precompile 

我把這個放在git add之前的終端中。我也重新啓動了heroku dyno。