JavaScript Event Listeners, with Turbolinks and AJAX

Joseph Kristofzski — Sun, 30 Apr 2023 21:40:30 +0000

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();
});

Click and change listeners are added similar to this:

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

Forem: Joseph Kristofzski

JavaScript Event Listeners, with Turbolinks and AJAX