本地主机和已部署(Heroku)之间的Rails/Bootstrap Navbar/jQuery差异 [英] Rails / Bootstrap Navbar / jQuery differences between localhost and deployed (Heroku)
问题描述
在开发基本的Rails应用程序时遇到问题.我已经实现了Twitter Bootstrap及其响应式导航栏.在移动屏幕上加载页面时，导航栏应按设计向下滑动并向上滑动.我试图弄清楚为什么某些情况会使jQuery动画出现故障且无法使用.我想确保此问题不会在部署中出现，并且因为它很烦人.
I'm having an issue while developing a basic Rails application. I've implemented Twitter Bootstrap and its responsive navbar. When the page is loaded on mobile screens the navbar should slide down and slide back up as designed. I'm trying to figure out why certain scenarios are making the jQuery animation glitchy and unusable. I want to make sure that this problem won't manifest in deployment and because it's quite annoying.
我的情况是:
Chrome浏览器(17.0.963.83)
- 动画效果很好.
- 开发人员工具中没有问题
Firefox(7.0.1)
- 动画故障.
-
Firebug显示发生在
- Animation glitchy.
Firebug shows a 3 step process happening in
`<div class="nav-collapse" style="height: auto;">...</div>`
`<div class="nav-collapse collapse" style="height: 0px;">...</div>`
`<div class="nav-collapse" style="height: auto;">...</div>`
iPhone 4和iPhone Simulator上的Safari
- 动画故障.
- 同样的3个步骤.
Chrome浏览器(17.0.963.83)
- 工作正常
Firefox(7.0.1)
- 工作正常
iPhone 4和iPhone Simulator上的Safari
- 工作正常
application.js-我在哪里调用脚本
//= require jquery
//= require jquery_ujs
//= require bootstrap-transition.js
//= require bootstrap-alert.js
//= require bootstrap-button.js
//= require bootstrap-carousel.js
//= require bootstrap-collapse.js
//= require bootstrap-dropdown.js
//= require bootstrap-modal.js
//= require bootstrap-tooltip.js
//= require bootstrap-scrollspy.js
//= require bootstrap-tab.js
//= require bootstrap-typeahead.js
//= require_tree .
Gemfile.lock
GEM
remote: https://rubygems.org/
specs:
actionmailer (3.2.2)
actionpack (= 3.2.2)
mail (~> 2.4.0)
actionpack (3.2.2)
activemodel (= 3.2.2)
activesupport (= 3.2.2)
builder (~> 3.0.0)
erubis (~> 2.7.0)
journey (~> 1.0.1)
rack (~> 1.4.0)
rack-cache (~> 1.1)
rack-test (~> 0.6.1)
sprockets (~> 2.1.2)
activemodel (3.2.2)
activesupport (= 3.2.2)
builder (~> 3.0.0)
activerecord (3.2.2)
activemodel (= 3.2.2)
activesupport (= 3.2.2)
arel (~> 3.0.2)
tzinfo (~> 0.3.29)
activeresource (3.2.2)
activemodel (= 3.2.2)
activesupport (= 3.2.2)
activesupport (3.2.2)
i18n (~> 0.6)
multi_json (~> 1.0)
arel (3.0.2)
builder (3.0.0)
coffee-rails (3.2.2)
coffee-script (>= 2.2.0)
railties (~> 3.2.0)
coffee-script (2.2.0)
coffee-script-source
execjs
coffee-script-source (1.2.0)
erubis (2.7.0)
execjs (1.3.0)
multi_json (~> 1.0)
hike (1.2.1)
i18n (0.6.0)
journey (1.0.3)
jquery-rails (2.0.1)
railties (>= 3.2.0, < 5.0)
thor (~> 0.14)
json (1.6.5)
mail (2.4.4)
i18n (>= 0.4.0)
mime-types (~> 1.16)
treetop (~> 1.4.8)
mime-types (1.17.2)
multi_json (1.1.0)
mysql2 (0.3.11)
pg (0.13.2)
polyglot (0.3.3)
rack (1.4.1)
rack-cache (1.2)
rack (>= 0.4)
rack-ssl (1.3.2)
rack
rack-test (0.6.1)
rack (>= 1.0)
rails (3.2.2)
actionmailer (= 3.2.2)
actionpack (= 3.2.2)
activerecord (= 3.2.2)
activeresource (= 3.2.2)
activesupport (= 3.2.2)
bundler (~> 1.0)
railties (= 3.2.2)
railties (3.2.2)
actionpack (= 3.2.2)
activesupport (= 3.2.2)
rack-ssl (~> 1.3.2)
rake (>= 0.8.7)
rdoc (~> 3.4)
thor (~> 0.14.6)
rake (0.9.2.2)
rdoc (3.12)
json (~> 1.4)
sass (3.1.15)
sass-rails (3.2.4)
railties (~> 3.2.0)
sass (>= 3.1.10)
tilt (~> 1.3)
sprockets (2.1.2)
hike (~> 1.2)
rack (~> 1.0)
tilt (~> 1.1, != 1.3.0)
thor (0.14.6)
tilt (1.3.3)
treetop (1.4.10)
polyglot
polyglot (>= 0.3.1)
tzinfo (0.3.32)
uglifier (1.2.3)
execjs (>= 0.3.0)
multi_json (>= 1.0.2)
PLATFORMS
ruby
DEPENDENCIES
coffee-rails (~> 3.2.1)
jquery-rails
json
mysql2
pg
rails (= 3.2.2)
sass-rails (~> 3.2.3)
uglifier (>= 1.0.3)
bootstrap-collapse.js
我认为这可能是导致问题的原因，但我不确定.
I think that something in this could be causing the issue but I'm not sure.
!function( $ ){
"use strict"
var Collapse = function ( element, options ) {
this.$element = $(element)
this.options = $.extend({}, $.fn.collapse.defaults, options)
if (this.options["parent"]) {
this.$parent = $(this.options["parent"])
}
this.options.toggle && this.toggle()
}
Collapse.prototype = {
constructor: Collapse
, dimension: function () {
var hasWidth = this.$element.hasClass('width')
return hasWidth ? 'width' : 'height'
}
, show: function () {
var dimension = this.dimension()
, scroll = $.camelCase(['scroll', dimension].join('-'))
, actives = this.$parent && this.$parent.find('.in')
, hasData
if (actives && actives.length) {
hasData = actives.data('collapse')
actives.collapse('hide')
hasData || actives.data('collapse', null)
}
this.$element[dimension](0)
this.transition('addClass', 'show', 'shown')
this.$element[dimension](this.$element[0][scroll])
}
, hide: function () {
var dimension = this.dimension()
this.reset(this.$element[dimension]())
this.transition('removeClass', 'hide', 'hidden')
this.$element[dimension](0)
}
, reset: function ( size ) {
var dimension = this.dimension()
this.$element
.removeClass('collapse')
[dimension](size || 'auto')
[0].offsetWidth
this.$element[size ? 'addClass' : 'removeClass']('collapse')
return this
}
, transition: function ( method, startEvent, completeEvent ) {
var that = this
, complete = function () {
if (startEvent == 'show') that.reset()
that.$element.trigger(completeEvent)
}
this.$element
.trigger(startEvent)
[method]('in')
$.support.transition && this.$element.hasClass('collapse') ?
this.$element.one($.support.transition.end, complete) :
complete()
}
, toggle: function () {
this[this.$element.hasClass('in') ? 'hide' : 'show']()
}
}
/* COLLAPSIBLE PLUGIN DEFINITION
* ============================== */
$.fn.collapse = function ( option ) {
return this.each(function () {
var $this = $(this)
, data = $this.data('collapse')
, options = typeof option == 'object' && option
if (!data) $this.data('collapse', (data = new Collapse(this, options)))
if (typeof option == 'string') data[option]()
})
}
$.fn.collapse.defaults = {
toggle: true
}
$.fn.collapse.Constructor = Collapse
/* COLLAPSIBLE DATA-API
* ==================== */
$(function () {
$('body').on('click.collapse.data-api', '[data-toggle=collapse]', function ( e ) {
var $this = $(this), href
, target = $this.attr('data-target')
|| e.preventDefault()
|| (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
, option = $(target).data('collapse') ? 'toggle' : $this.data()
$(target).collapse(option)
})
})
}( window.jQuery );
推荐答案
您是否在本地使用RVM?如果是，请-为您的应用设置一个干净的gemset并再次运行捆绑安装.
Are you using RVM locally? If you are - try setting up a clean gemset for your app and running bundle install again.
通过这种方式，您将知道所使用的版本与在heroku部署中使用的版本完全相同.
That way you'll know that you're using the exact same versions as on your heroku deployment.
如果这不能解决您的问题，则引导代码本身可能存在错误-尝试在引导问题年龄上提出问题. (或至少搜索现有问题)
按照评论中的建议(以及将来的Google员工...)-检查编译后的资产.确保运行相同的gem版本后，请确保引用的是完全相同的资产文件.删除公用文件夹中的所有预编译资产，然后在application.rb中更改config.assets.enabled = true.
As suggested in the comments (and for future googlers...) - Check your compiled assets. Once you've ensured that you're running the same gem versions, make sure you're referencing the exact same asset files. Delete all of the precompiled assets in the public folder and change config.assets.enabled = true in application.rb.
这在Heroku部署中尤其重要.
This is especially important on Heroku deployments.
这篇关于本地主机和已部署(Heroku)之间的Rails/Bootstrap Navbar/jQuery差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
