JavaScript won't work in Heroku deployment but works locally

Question

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.

There is an error from `Google Maps API` in the console. This may prevent everything else from working properly. Try addressing this first. — Jan Klimo, Jun 26 '17 at 04:13
It would of taken me weeks to get to this! thank you so much this was the issue!! — Oliver Walker, Jun 26 '17 at 14:58

Oliver Walker · Accepted Answer · 2017-06-28T18:55:56.703

1

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.

edited Jun 28 '17 at 18:55

answered Jun 26 '17 at 15:05

Oliver Walker

25
5

JavaScript won't work in Heroku deployment but works locally

1 Answers1