Setting a morph root
When submitting forms, if an error occurs, by default, Mrujs will use a library called “morphdom” to render the new state of the page.
Sometimes, you may want to “scope” what morphdom will
change. By default, morphdom targets document.body
. This
may not be desireable for all circumstances.
On the submitting form you can do the following:
<form data-ujs-morph-root></form>
and this will scope changes to only the form. If, however, you would like to scope changes to an external element, you can pass a valid querySelector string like so:
<div id="form-errors"></div>
<form data-ujs-morph-root="#form-errors"></form>
This means morphdom will only show changes to the children
contained in #form-errors
If the morph-root
cannot be found, mrujs will fallback to
morphing the entire body of the page.
Do note, data-ujs-morph-root
only applies to error
handling. Successful form submissions are expected to
redirect and their HTML / navigation will be piped through
Turbo[links].