DEV Community

Joseph Kristofzski
Joseph Kristofzski

Posted on

JavaScript Event Listeners, with Turbolinks and AJAX

What best practices do you follow to maintain a clean, logical set of initializers in a Rails app, taking Turbolinks and AJAX into account?

I've seen whole app initializes and single function listeners while looking through various open source apps. Some big Ruby on Rails app are set up like this:
https://github.com/forem/forem/blob/main/app/assets/javascripts/base.js.erb
https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/main.js

I've been primarily working on smaller Rails apps, and I've found it easiest to set up standalone listeners, similar to this:

// Turbolinks and AJAX listeners
$(document).on('turbolinks:render ajaxSuccess', function () {
  some_function();
}); 

// Document ready
// (Older versions of jQuery let me put ready in the first listener)
$(document).ready(function() {
  some_function();
});
Enter fullscreen mode Exit fullscreen mode

Click and change listeners are added similar to this:

$(document).on('click', '.my-class', function() {
  some_function();
});
Enter fullscreen mode Exit fullscreen mode

Top comments (0)