How to Make Sure You’re Serving Non-static jQuery Assets in Your Rails Web Application’s Development Environment

So like a good little boy, I followed Heroku’s instructions for compiling my rails assets locally¹. And as I was also dabbling with jQuery, I decided to add a sliding accordion effect to an edit form in my web application, AceMusicTeacher.com. I thought it might make the user interface slicker (side note: I’m working with Rails 3.2.8 and jQuery 1.8.x).

Unfortunately, adding a slicker interface also seemed to add a bug in my application

I couldn’t figure it out. Previously, before I had precompiled, the sliding accordion effect was working fine. (Side note: I didn’t realize this connection at first because right after I had the jQuery effect working, I precompiled and then pushed it to the Heroku server, and it was some time before I came back to working on my web application again). But now, when I would click on the affected area, it would slide open, and then slide shut.

Another WTF moment in my web development experience

At this point, I had just begun dabbling in jQuery so the only debugging technique up my sleeve was to add an alert box in the code. So after spending a lot of time experimenting, I eventually had 2 different jQuery files – one with the sliding accordion code that displayed an alert box with the selected element text and number of seconds as retrieved by a Javascript Date() function call and another file with an alert box that displayed the message “non-static” when it was called. Below is the code for the 2 files:

File 1 code snippet: The precompiled (static) jQuery file that displayed the element text and number of seconds

$(document).ready(function() {
  $('.accordion h3:first').addClass('active');
  $('.accordion table:not(:first)').hide();
  $('.accordion h3').click(function() {
    $(this)
      .next('table')
      .slideToggle()
      .siblings('table:visible')
      .slideUp('slow');
    $(this).toggleClass('active');
    $(this)
      .siblings('h3')
      .removeClass('active');
    alert('non-static');
  });
});

File 2 code snippet: The non-precompiled (non-static) jQuery file that displayed the message “non-static”

$(document).ready(function() {
  $('.accordion h3:first').addClass('active');
  $('.accordion table:not(:first)').hide();
  $('.accordion h3').click(function() {
    $(this)
      .next('table')
      .slideToggle()
      .siblings('table:visible')
      .slideUp('slow');
    $(this).toggleClass('active');
    $(this)
      .siblings('h3')
      .removeClass('active');
    var d = new Date();
    alert(
      $(this)
        .next()
        .text() + d.getSeconds(),
    );
  });
});

Then I restarted my thin web server and…

Voila! I ended up getting 2 alert box calls when I was activating the sliding accordion effect in my edit form. One was the alert box that displayed the element text and number of seconds, and the other was an alert box with the message “non-static”. This meant that somehow both the non-static jQuery and static jQuery files were both being called. No wonder the affected area was sliding shut. The first jQuery file would open it when I would click the area, and the second one would close it.

After googling around, I came upon a stackoverflow post which helped me to resolve it². But even then I still had to monkey around a bit to figure out to solve the problem.

Drum roll…and the solution is….

First, I added config.serve_static_assets = false in the environments/development.rb file in my rails application. Then I restarted my local development web server (the thin server in my case). But I was still getting 2 alert box calls. Again, wtf? Finally, I cleared the Firefox browser cache and everything started working fine.

Summary

So if you’re having this issue because you precompiled assets for heroku, the steps to make sure you’re serving non-static jQuery assets in your development environment are as follows:

1. Add config.serve_static_assets = false to your application’s config/environments/development.rb file.
2. Restart your rails development server to let Rails know you’re serving non-static assets in your development environment
3. Clear your browser’s cache (in Firefox on Ubuntu 10.04, it’s Tools>Clear Recent History>Cache) so it’s not using both the static and non-static jQuery files

Source(s):

1. https://devcenter.heroku.com/articles/rails3x-asset-pipeline-cedar
2. http://stackoverflow.com/questions/8356251/rails-3-1-assets-strange-serving-in-development