Ruby on Rails 6 with JQuery UJS

ajax ruby on rails software development

Alright, like a lot of you, I'm loving that in Rails 6, we're moving all of our Javascript management to Webpacker by default. However, within this transition, we're losing a lot of the automatic functionality that we're used to getting with the asset pipeline. One of the biggest things that doesn't seem to be quite ironed out yet is UJS and specifically with AJAX calls.

In the past, we had both Rails UJS and JQuery UJS to help us automatically append a CSRF token to our non-get AJAX requests to seamlessly use Ajax calls in our Rails applications. However, now with Rails 6, it doesn't seem so easy, nor is it very clear what the correct way to do it is.

I've read a lot of articles suggesting that when going to Rails 6 with Webpacker, to replace calls like $.ajax with Rails.ajax, but I've also read contradictory articles saying that the Rails javascript library is meant as an internal library.

With that in mind, I turned my attention to JQuery UJS and it seems that even including it via Webpack is not super easy in terms of getting it working.

So as it stands now, I don't really see a clear answer on how to properly make AJAX calls in Rails 6.

I did find one article Working with Javascript in Rails, which I definitely trust, but there is one thing they mention at the very end: "When using another library to make Ajax calls, it is necessary to add the security token as a default header for Ajax calls in your library."

So that had me thinking - ok, the proper way to do it is to append the CSRF token to everyone of your AJAX calls in the header if using something like JQuery to make your Ajax calls.

While that may be correct, it seemed tedious, not to mention what UJS seemed to be doing.

So in the end, I decided for now, for Rails 6.0 apps, to just go back to the old way of doing things - let the asset pipeline manage JQuery and JQuery UJS and just let webpacker manage all the other javascript. Hopefully there will be clearer answers in the near future as to how to handle a simple ajax call via Fetch or JQuery that doesn't involve appending something to your header every time.

Alright, so how to restore the asset pipeline way of doing things...

  1. Add the jquery-rails gem to your Gemfile and bundle
  2. Edit your app/assets/config/manifest.js file to include a new javascripts folder

    //= link_tree ../images
    //= link_directory ../stylesheets .css
    //= link_directory ../javascripts .js
  3. Create the app/assets/javascripts folder and add a application.js file (just like old times)

  4. Add the following to the newly created application.js file (just like old times)

    //= require jquery
    //= require jquery_ujs
  5. As to not conflict with Rails UJS, remove the require("@rails/ujs").start() from the app/javascript/packs/application.js file

  6. Add the old include tag to layout application.html.erb ABOVE any webpack import

    <%= javascript_include_tag 'application' %>
  7. Code the rest of your Javascript in Webpacker

Basically what we're doing is we're using Sprockets/Asset Pipeline to set up one global javascript function: JQuery + JQuery UJS. Everything else though, we run through Webpacker.

Essentially - we're going back to Rails 5.1 ways of doing things and the catch was step 2 (restoring the Javascripts folder in the asset pipeline).

All this being said - I would love to hear what other Rails 6+ developers are doing. Are you using fetch? Are you using $.ajax? Are you using Rails.ajax? If so, are you manually appending the CSRF token? As far as I can tell, there's no real accepted way of doing this.

Let me know. Thanks for reading.

Casey Li
CEO & Founder, BiteSite