Rails inline Javascript and Best Practices

Question

I\'m kinda new to using Rails, and an app I am working on is progressing well - however I\'m looking though the generated HTML and noticed things like...

Answer 1

Best practice is to remove all inline javascript. However, there are 3 cases that I've run into where you absolutely need inline javascript:

1. To resolve image errors

If an image tag is referencing an image path that doesn't exist, the only way to prevent the image error from appearing (even in the web inspector) is to do this:

The following doesn't work because the onerror event is executed before you even have time to grab the image with jQuery:

$("img").error(function() {
  $(this).attr("src", "/i/do/exist.png")
});

The code below doesn't work either because the onerror event doesn't bubble:

$("img").live("error", function() {
  $(this).attr("src", "/i/do/exist.png");
});

So you have to use inline javascript for that.

2. To render javascript templates as the page loads

If you wait until $(document).ready to draw your feed of content into one of the empty container elements in your dom, the user will see the blank spot for a split second. This is why when your Twitter page first loads, the feed is blank for an instant. Even if you just put an external script file at the bottom of the dom, and in there you append the dynamically generated html elements to your page without even using $(document).ready, it's still too late. You have to append the dynamic nodes immediately after the container element is added:

  // dynamic content here



  // dynamically toggle which one is selected with javascript
  

    
Search By Category
    

      

        Category A
      
      

        Category B
      
    
  

3. You're bootstrapping your app with JSON

If you're using JSON + javascript templates, it's a good idea to bootstrap the first set of data into the response body by including it inline in the page (in the above dom example too). That makes it so you don't need an additional ajax request to render content.

Everything else should be done with Unobtrusive Javascript

Rails has a lot of javascript helpers, and thankfully in Rails 3 most (all?) of it is unobtrusive; they're now using the data- attribute and an external rails.js file. However, many of the gems out there that are part-ruby part-javascript tend to still write helper methods add complex javascript inline:

• https://github.com/rubaidh/google_analytics
• https://github.com/scrubber/jquery_grid_for_rails
• https://github.com/sandipransing/rails_tiny_mce
• https://github.com/phronos/rails_datatables

That's helpful, but I think just having a clear README describing how to add the javascript to your application.js is even more useful. External javascript makes it a lot easier to customize/extend the functionality down the road, it gives you a lot more control over the system, and it minimizes duplication across your html pages (so the response body is smaller, and the browser can cache external javascript files). Unless you need to handle missing images, instantaneous rendering, or bootstrap some json, you can put everything else in external javascript files and never have to use Rails javascript/ajax helpers.