Search code examples
ruby-on-railsasset-pipelinerails-assets

JavaScript won't work in Heroku deployment but works locally


I wrote this function in app/assets/javascripts/expand.js

$( document ).ready(function() {
  var open = $('.toggle-expand'),
      a = $('ul').find('a');

  open.click(function(e){
      e.preventDefault();
      var $this = $(this),
          speed = 500;
      if($this.hasClass('active') === true) {
          $this.removeClass('active').next('.expandable').slideUp(speed);
      } else if(a.hasClass('active') === false) {
          $this.addClass('active').next('.expandable').slideDown(speed);
      } else {
          a.removeClass('active').next('.expandable').slideUp(speed);
          $this.addClass('active').next('.expandable').delay(speed).slideDown(speed);
      }
  });
});

The script works fine locally and behaves as expected, but when I deploy to Heroku it stops working entirely.

for reference, here is the HTML that the script is acting on:

   <ul>
      <li>
         <a href="#" class="toggle-expand"><h2>text here</h2></a>
          <div class="expandable">
           ...more stuff here
          </div>
      </li>
      ...more li tags here
    </ul>

Debugging I have already done:

I've been able to replicate the problem in my development environment by changing a line in development.rb to config.assets.debug = false. I don't know enough about rails to gain any insight from that.

I precompiled all the assets with RAILS_ENV=production bundle exec rake assets:precompile. and pushed that up.

after that didn't work I tried precompiling again after a git rm -r public/assets/

When that did not work I then used the developer tools on chrome or firefox to look through all the uglified js being loaded in my production environment. I saw that my functions appear to have been loaded, but then I'm not seeing the functionality I expect so I don't know what's going on there either.

To see what I saw you can go to https://www.shopperbot.com/about and look at the resource https://www.shopperbot.com/assets/application-db55113ff25f4decb133ccb74aa98298822de2381cddc0ae3fa8c03b65180dd0.js It's a huge file so you will want to search for the word expandable. that word is unique to the function in question.

I am still very new to rails so I am not sure where to go from here. I could try changing the location of my js but I don't think that would be ideal. Does anyone have any suggestions?

Because this all works fine in my local environment... I suspect I'm making some beginner's mistake that can be fixed with some magic 1 liner out there that I have not yet found.


Solution

  • As Jan Klimo pointed out in a comment I had removed the google maps API and still had functions expecting the API to exist. Those errors caused my script to not function.

    The solution was to remove all references to the removed API.