How to use Rails.ajax in Stimulus Controllers

Posted on

I’m a big fan of using Rails UJS, it’s a really nice way to handle 90% of the things I need to do by sprinkling a little bit of extra markup into my HTML.

I recently needed to make an AJAX call within a stimulus controller. Initially I looked at using the Fetch API, however I needed to support IE & wanted an easy way to include CSRF Protection.

In the past I’ve been able to use Rails.ajax for this. It handles CSRF Protection out of the box & is pretty straight forward to use. However when I added it to my Stimulus controller I received a “Rails is undefined” error (As modern JS requires you to declare which libraries each JavaScript file is using).

Here is the code I ended up with to get it working:

// app/javascript/controllers/ajax_request_controller.js
import { Controller } from "stimulus"

// Import UJS so we can access the Rails.ajax method
import Rails from "@rails/ujs";

 * Usage:
 * <form data-controller="ajax-request" data-ajax-request-url="/sample-path">
 *   <button data-action="click->ajax-request#makeRequest">Make Request</button>
 * </form>
export default class extends Controller {

   * UJS has a nice Rails.ajax method, which worked in older version of IE & is a lot like jQuery's $.ajax
  makeRequest() {
      type: "post",
      data: new FormData(this.element)