Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including stimulus-rails-ujs with all npm packages installed. Try it out:

var stimulusRailsUjs = require("stimulus-rails-ujs")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

stimulus-rails-ujs v1.0.1

Rails UJS bindings for Stimulus

Stimulus Rails UJS

Stimulus controller to provide integration with Rails UJS

Installation

$ yarn add stimulus-rails-ujs

Usage

Register the controller with Stimulus:

// application.js
import { Application } from 'stimulus';
import { RailsUJSController } from 'stimulus-rails-ujs'

const application = Application.start()
application.register('rails-ujs', RailsUJSController)

Initialize the controller on a container element, and an action to render form errors:

= form_with model: @model, data: { controller: 'rails-ujs', action: 'ajax:error->rails-ujs#error' } do |f|
  = f.text_field :field_name
  = f.submit

In the Rails controller, you will need to modify your response:

def create
  @model = Model.new model_params
  if @model.save
    redirect_to models_path, notice: 'Success!'
  else
    render partial: 'form', status: :unprocessable_entity
  end
end

You can see that the form partial has been separated so it is the only thing returned in the response. The response also sets an Unprocessable Entity HTTP Status Code (422). This is important so that Rails UJS emits a 'ajax:error' event.

Options

data-rails-ujs-load-scripts

Setting this attribute on the controller element will eval() scripts in the response if set. This is intentionally off by default.

Example
= form_with model: @model, data: { controller: 'rails-ujs', action: 'ajax:error->rails-ujs#error', rails_ujs_load_scripts: true } do |f|
  = f.text_field :field_name
  = f.submit

Methods

error

The error method is used to render the form back to the page with error messages.

Example
= form_with model: @model, data: { controller: 'rails-ujs', action: 'ajax:error->rails-ujs#error' } do |f|
  = f.text_field :field_name
  = f.submit

success

The success method can be used to render a response to anywhere on the page.

Params
  • data-response-target a CSS selector where the response will go

  • data-placement one of append|prepend|replace|replace_inner

    append and prepend will append/prepend the response to the data-response-target

    replace will replace the entire data-response-target (outerHTML)

    replace_inner will replace the contents of data-response-target (innerHTML)

Example
%ul#response
  %li An existing content piece

= form_with model: @model, data: { controller: 'rails-ujs', action: 'ajax:success->rails-ujs#success', placement: 'append', response_target: '#response' } do |f|
  = f.text_field :field_name
  = f.submit

submit

The submit method can be called anywhere. A good example would be to submit the form on change of an element where you want the entire form submitted.

Example
= form_with model: @model, data: { controller: 'rails-ujs', action: 'ajax:error->rails-ujs#error' } do |f|
  = f.text_field :field_name
  = f.check_box :option, data: { action: 'change->rails-ujs#submit' }
  = f.submit

Contributing

Fork the project.

Install dependencies

$ yarn install

Start the test watcher

$ yarn test:watch

Running one-off test runs can be done with:

$ yarn test

Write some tests, and add your feature. Send a PR.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free