Getting Started
1. Install Mrujs
yarn add mrujs
2. Import Mrujs
With Turbo
// app/javascript/packs/application.js
import mrujs from "mrujs";
import * as Turbo from "@hotwired/turbo";
// Turbo must be set before starting mrujs for proper compatibility with querySelectors.
window.Turbo = Turbo;
mrujs.start();
With Turbolinks
import mrujs from "mrujs";
import Turbolinks from "turbolinks";
mrujs.start();
Turbolinks.start();
3. Ajax Form submissions
data-turbo="false"
to avoid any event
conflicts.
As of
v0.4.2
, data-turbo="false"
will automatically be
set for you.
With Rails form helpers
<%= form_with scope: Model, local: false do |form| %>
<%= form.label :name %>
<%= form.text_field :name %>
<%= form.submit "Submit", data-disable-with: "Submitting..." %>
<%= end %>
With regular HTML
<form method="post" action="/users" data-remote="true">
<label for="user[name]">Name</label>
<input id="user[name]">
<input type="submit" data-disable-with="Submitting...">
<!-- OR -->
<button type="submit" data-disable-with="Submitting...">
</form>
4. Sending an Ajax DELETE
request from a link
<a href="/" data-method="delete">Ajax delete request</a>
5. Stopping Mrujs
If you would like to stop Mrujs, feel free to do the following:
window.mrujs.stop();
This will remove all mutation observers and event listeners.
Next Steps
Check out the Practical Guide to mrujs for a guide tour of whats possible with mrujs!