Search code examples
javascriptjqueryruby-on-railsherokuproduction

Rails - jQuery not working in production with Heroku

I'm deploying a website with Heroku, though really struggling to get the jQuery firing when it goes live. Locally, all works fine.

I've had a play and haven't found any solution - it's all loading in the asset pipeline, shows as a source on the live page (albeit without working) and I've tried all of the solutions I've found on the web.

I've performed rake assets:precompile, have config.assets.compile = true and, thinking it might be a problem due to Turbolinks, installed the jquery-turbolinks gem.

With every change I thought I'd have this running, though nothing has affected the site's behaviour yet. Here's some code:

Gemfile

...
gem 'bootstrap-will_paginate'
gem 'bootstrap-sass'
# Use jquery as the JavaScript library
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'jquery-turbolinks'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
...

Application.js

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

Application.html.erb

<head>
  <link href='http://fonts.googleapis.com/css?family=Slabo+27px' 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>

Home.js

var validBox = function(x, y){
 ...
      });
};

var main = function(){
    $('.toggle').click(function(){
      $('.about-me').toggle(); 
    });
    //Carosel
    $('.arrow-next').click(function(){
        ...
    });
    $('.arrow-prev').click(function(){
      ...
    });
    //Comments
    $('.btn').click(function() {
     ...
      });
      $('.status-box').keyup(validBox('.status-box', '.name-box'));
      $('.name-box').keyup(validBox('.name-box', '.status-box'));
      $('.btn').addClass('disabled');
    }

$(document).ready(main);

Could it be a problem with the $(document).ready(main); line? I've a feeling I've read somewhere jQuery doesn't always respond as the page isn't loading from scratch / 'ready' when using Turbolinks, though thought the addition of the relevant Gem would resolve this. I've also tried $(document).on('ready', 'page:change')(main); to run the function at other points, but to no avail.

Alternatively, I seem to remember there being some command line functions to better ensure the assets run when live though can't find anything relevant.

Any help would be GREATLY appreciated as I'm stumped with this one. I'm pretty new to this, so apologies if there are any glaring, amateur errors in amongst this (though that might mean a simple solution!).

Thanks in advance, Steve.

Solution

  • In my case, I found the answer here:

    Bootstrap won't detect jQuery 1.11.0 - Uncaught Error: Bootstrap's JavaScript requires jQuery

    The Java console was throwing up the error mentioned there, and after lord knows how much hunting, simply changing the order the js files were loaded made the difference.

    Bootstrap after jQuery, everything works perfectly!!

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