Understanding Remote Forms and Links
What are remote forms and links? When you see the word “Remote” referencing forms or links, it means the element is submitting its contents via “AJAX”.
Negotiating proper Accept Header
Remote forms can also negotiate the proper
Accept headers. To do so,
data-type='json' to tell the server you can only accept
mrujs defined a number of predefined
data-type ‘s for you.
This means you can pass a
data-type="xml", and so on as long as it matches with that key. If
you need a custom Accept header, you will have to simply do it yourself
<form data-type="application/xml, text/xml">
Sometimes you want to add additional methods to your links. Heres how to do that:
<a data-method="delete" href="/logout">
This will create a
fetch request and then navigate to the new page if
redirected, or refresh the current page is no redirect found.
data-* attributes attach behavior in mrujs:
data-remote="true" // => Make a link or form submit via AJAX data-method="delete" // => Make a link perform the method via AJAX data-confirm="Are you sure?" // => Pulls up a confirm dialog when the element is clicked data-disable="true" // => Disables the submit element clicked in a form / link and reenables it on success data-disable-with="Submitting..." data-disable-with="<div class="spinner">Submitting...</div>" // => Replaces the current innerHTML of the clicked input / link with // the text / html in data-disable-with data-type="<mimeType>" // => Uses the value as the Accept header for the link / form.
Working with Turbo
Turbo and mrujs have some conflicting pieces of functionality. In order
to avoid clashing with Turbo, remote elements and forms require
data-turbo="false", mrujs will do this automatically for you
when it detects
data-method="<method>" on a
link or form.
Attributes that need
v0.4.2, mrujs will automatically attach
data-turbo="false"on these elements if
data-turbois not already set.
Attributes that don’t need
data-confirm="Are you sure?" data-disable="true" data-disable-with="Submitting..."
Also of note, Turbo has its own
data-method, to avoid conflicts with
data-method, please use
data-turbo-method when you want to
use Turbo’s version of link methods.
mrujs has a built in navigation adapter which will navigate a user from
page to page using Morphdom or Turbo(links) if it receives an HTML
response. If you would like to opt out of the navigation, you can
data-ujs-navigate="false" on the element.
Perhaps you have a form or a link that you dont want to
submit for some reason. You can add
data-ujs-submit="false" to it and it wont submit. This
technique is leveraged by the ActiveStorage plugin.