search

Nerian / bootstrap-datepicker-rails

A Datepicker for Twitter Bootstrap, integrated with Rails assets pipeline
MIT License
648 stars 182 forks source link

Not loading properly on Ruby on Rails 4 production mode #116

Closed KarlHeitmann closed 8 years ago

KarlHeitmann commented 8 years ago

I'm working on a Ruby on Rails 4.2.5 application, and I'm using gem 'bootstrap-datepicker-rails' 1.5.0

When I'm working on my development server, on the local computer, I can click the text_field and the calendar pops up properly:

= f.text_field :fecha_raw_begin, class: "puntero", "data-provide" => "datepicker", "data-date-format" => "dd/mm/yyyy", "data-date-autoclose" => "true", "data-date-language" => "es"

Note: My datepicker widget belongs to a form, I want to perform searches between a time span.

But whenever I switch to production mode, deploying on a remote server using Capistrano, I get problems: whenever I click the text_field, the datepicker doesn't pops up.

I have no clue what could be the cause of this strange behaviour.

Things that I've already tried are listed below:

rake assets:precompile RAILS_ENV=production

  • I switched off the uglifier gem, in order to better debug my app on the web browser
  • I've completely removed the turbolinks gem, since in the past I've had conflicts between turbolinks and some javascript files: $(document).ready(function() { }

I don't know what else could I do, if you guys need more information in order help me to solve my problem, I'd be glad to provide it to you.

I believe the problem could be on my config/environments/production.rb, here you are a code snippet of the parameters I think are related to my problem.

Rails.application.configure do
  # Settings specified here will take precedence over those in config/application.rb.

  # Code is not reloaded between requests.
  config.cache_classes = true

  # Eager load code on boot. This eager loads most of Rails and
  # your application in memory, allowing both threaded web servers
  # and those relying on copy on write to perform better.
  # Rake tasks automatically ignore this option for performance.
  config.eager_load = true

  # Full error reports are disabled and caching is turned on.
  config.consider_all_requests_local       = false

  # Disable serving static files from the `/public` folder by default since
  # Apache or NGINX already handles this.
  config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?

  # Compress JavaScripts and CSS.
  # config.assets.js_compressor = :uglifier
  # config.assets.css_compressor = :sass

  # Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = false

  # Asset digests allow you to set far-future HTTP expiration dates on all assets,
  # yet still be able to expire them through the digest params.
  config.assets.digest = true

  # etc...

end
Nerian commented 8 years ago

Hi,

I would suggest that you take a look at the html on production and see what the compiled JS has. Look for the Datepicker stuff. That will tell you if the datepicker JS is there.

Also, is there any error on the JS console?

svavantsa commented 8 years ago

The way I've used date picker is by making the class name "datepicker". Not data provider. I think that's what the documentation said too.

Take care Surya Avantsa On Apr 16, 2016 15:24, "Karl" notifications@github.com wrote:

I'm working on a Ruby on Rails 4.2.5 application, and I'm using gem 'bootstrap-datepicker-rails' 1.5.0

When I'm working on my development server, on the local computer, I can click the text_field and the calendar pops up properly:

= f.text_field :fecha_raw_begin, class: "puntero", "data-provide" => "datepicker", "data-date-format" => "dd/mm/yyyy", "data-date-autoclose" => "true", "data-date-language" => "es"

Note: My datepicker widget belongs to a form, I want to perform searches between a time span.

But whenever I switch to production mode, deploying on a remote server using Capistrano, I get problems: whenever I click the text_field, the datepicker doesn't pops up.

I have no clue what could be the cause of this strange behaviour.

Things that I've already tried are listed below:

  • I precompiled the assets using

rake assets:precompile RAILS_ENV=production

-

I switched off the uglifier gem, in order to better debug my app on the web browser

I've completely removed the turbolinks gem, since in the past I've had conflicts between turbolinks and some javascript files: $(document).ready(function() { }

I don't know what else could I do, if you guys need more information in order help me to solve my problem, I'd be glad to provide it to you.

I believe the problem could be on my config/environments/production.rb, here you are a code snippet of the parameters I think are related to my problem.

Rails.application.configure do

Settings specified here will take precedence over those in config/application.rb.

Code is not reloaded between requests.

config.cache_classes = true

Eager load code on boot. This eager loads most of Rails and

your application in memory, allowing both threaded web servers

and those relying on copy on write to perform better.

Rake tasks automatically ignore this option for performance.

config.eager_load = true

Full error reports are disabled and caching is turned on.

config.consider_all_requests_local = false

Disable serving static files from the /public folder by default since

Apache or NGINX already handles this.

config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?

Compress JavaScripts and CSS.

config.assets.js_compressor = :uglifier

config.assets.css_compressor = :sass

Do not fallback to assets pipeline if a precompiled asset is missed.

config.assets.compile = false

Asset digests allow you to set far-future HTTP expiration dates on all assets,

yet still be able to expire them through the digest params.

config.assets.digest = true

etc...

end

— You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub https://github.com/Nerian/bootstrap-datepicker-rails/issues/116

KarlHeitmann commented 8 years ago

Hi @Nerian !

I would suggest that you take a look at the html on production and see what the compiled JS has. Look for the Datepicker stuff. That will tell you if the datepicker JS is there.

I did a

$ cat public/assets/application-<lots-of-numbers>.js | grep datepicker And I found results showing the "datepicker" pattern, so the code has been compiled correctly.

Also, is there any error on the JS console?

What a rookie mistake! I've completely forgotten to check out the JS console!!! Now that you remind me, I've found out that there are some errors:

ERRORS ON DEVELOPMENT ENVIRONMENT

ERRORS ON PRODUCTION ENVIRONMENT

As you can see, stangely there are more errors on development mode rather than production mode. However, the datepicker is appearing on development mode despite it shows me more errors. If I click the error line of the second error message on development mode, it redirects me to this code snippet:

  var Default = $.extend({}, Tooltip.Default, {
    placement: 'right',
    trigger: 'click',
    content: '',
    template: '<div class="popover" role="tooltip">' + '<div class="popover-arrow"></div>' + '<h3 class="popover-title"></h3>' + '<div class="popover-content"></div></div>'
  });

If I execute the following command on my production server:

$ cat public/assets/application-<lots-of-numbers>.js | grep 'var Default = $.extend({}, Tooltip.Default, {'

I get no results.

Anyways, I'm going to include Tether and the I'm going to tell you my results... maybe if I solve this dependency that before I was unaware of, the problem would solve. Thank you.

Hi @svavantsa !

The way I've used date picker is by making the class name "datepicker". Not data provider. I think that's what the documentation said too.

Sure, I believe you are right, I was inspired by an example some time ago, and it worked for me (at least on development environment). Nevertheless, I'm also having the same trouble with a gem related to bootstrap: the Bootstrap-Image-Gallery-Rails. It's usefull to implement a image gallery on a rails application, using some bootstrap elements. The trouble is the same, it runs OK on development mode, but in production mode the image gallery is disabled.

Right now, I believe if I solve the Tether dependency, both problems will vanish.

Thank you both for your feedback!

KarlHeitmann commented 8 years ago

SUCCESS!

It was the Tether dependency, here is my new layout (I think maybe I will refactor it later) on HAML code:

!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title SeguimientoDespacho
    %script{:src => "https://www.atlasestateagents.co.uk/javascript/tether.min.js"}
    = stylesheet_link_tag    'application', media: 'all'
    = javascript_include_tag 'application'
    = csrf_meta_tags
  %body

Thank you for your help, both problems were solved.

PS: Still, I wonder why my widgets had this strange behaviour only on production environment. Why in development environment it was working so fine, despite the lack of the Tether library? Could somebody explain it to me before we to close this issue, please?

Nerian commented 8 years ago

Well, the JS interpreter tries execute the JS code, line by line. If it encounters an error then the execution is halted. No further lines are executed. In development the JS is divided in multiple files, so code execution will only be halted once in a file. In production, Rails compiles it to just one single big JS file. So when the error about tether is encountered, no more JS is executed. The datepicker stuff was probably after the tether code. I believe that was the issue.

KarlHeitmann commented 8 years ago

That makes perfect sense! That's the reason why my code on development mode threw more errors than the code in production mode. Thanks, I will close the issue :)

ijrodrigues commented 6 years ago

@KarlHeitmann This post save me. Thank you very much. I spent ALL DAY blaming heroku hahaha.