jQuery document ready not firing in a Rails 5 App with ActionCable

Question

I've just deployed a new rails 5 app to production, but I cannot get the document ready function to fire. The application, including ActionCable connection and rails console output in the document ready statement fire locally in Chrome, Firefox, etc.

Contents of my app/assets/javascripts/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. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require featherlight.min
//= require jquery.growl
//= require cable
//= require base
//= require tradewars
//= require extensions
//= require_tree .

// TradeWars.io - application.js file

var Mining_Loop_Iterator = false;

$(document).ready(function() {

  console.log("Initializing new TradeWars class...");
  TradeWars = new TradeWarsClass();
  console.log("Applying click handlers...");
  TradeWars.applyClickHandlers();

  console.log("Attempting to create WebSocket...");

  App.game = App.cable.subscriptions.create({
    channel: "GameChannel"
  }, {
    connected: function() {},
    disconnected: function() {},
    received: function(data) {
      console.log('Received via ActionCable :: ' + data.message.method + ' :');
      console.log(data);
      if (data.message.method == 'disable_mining') {
        TradeWars.disableMining(data.message);
      } else if (data.message.method == 'offer_chest') {
        TradeWars.offerChest();
      } else {
        // Refresh
        TradeWars.animateDigging(data.message);
        TradeWars.refresh(data.message);
      }
      return true;
    },
    mine: function(clicks_per_second) {
      return this.perform('mine', {
        clicks_per_second: clicks_per_second
      });
    }
  });

  TradeWars.miningLoop();

});

I also have this defined inline in the HTML of the page being loaded:

<script>

$(document).ready(function() {

    setTimeout(function() {

      TradeWars.planet_id = 21;

    }, 5000);

});

</script>

When this eventually does fire, I get a "ReferenceError: TradeWars is not defined" javascript error.

I've enabled the asset pipeline in rails and am precompiling the assets via the command-line with:

bin/rails assets:precompile

I'm also getting the JavaScript error (on both local development & production):

Uncaught Error: Bootstrap tooltips require Tether (http://tether.io/)

But I don't think that would be it, plus I don't want to have to install Tether.

Any help would be much appreciated.

Answer 1

Working with another developer, we tried various fixes.

Here's a few things we did first to make sure Action Cable was working appropriately.

In production.rb :

config.action_cable.url = "ws://tradewars.io/cable"

In the application layout (application.html.erb), added:

<%= action_cable_meta_tag %>

Then, ultimately what solved the issue (we believe) was fixing the Tether error!

Uncaught Error: Bootstrap tooltips require Tether (http://tether.io/)

By adding the tether-rails gem to the Gemfile:

gem 'tether-rails'

Then following the steps outlined here: https://github.com/jakegavin/tether-rails

The "Uncaught Error" (tether) went away, and jQuery magically started firing the document ready event!

Gosh I love this profession.