fetch(instead of XMLHttpRequest)
elementaccessor. You can even scoop up the attributes of parent elements. This is very different from the mechanics of a form submission.
formelement - or a child of that
formelement - then the data for the whole form can optionally be serialized and made available to the server-side Reflex action method as the
paramsis an instance of
ActionController::Parameterswhich you can manipulate the same way you would with a real form submitted via a normal POST action, with
permit. This is useful for validating models and setting multiple attributes of a model at the same time, even if it hasn't yet been saved to the datastore.
serializeForm: trueoption when calling
stimulate()or make sure that there's a
data-reflex-serialize-formdata attribute on the element which initiates your Reflex action.
formelements as a familiar way to group related elements together. However, a lot of newcomers get attached to the idea that the form they are serializing is being POSTed as an HTML form, which it is not.
<form></form>with no other mechanism or configuration required
remote: trueby default. This catches many developers off-guard!
requestSubmitor have no idea why it exists.
submit()submits the form, but that's all it does.
requestSubmit(), on the other hand, acts as if a submit button were clicked. The form's content is validated, and the form is submitted only if validation succeeds. Once the form has been submitted, the
submitevent is sent back to the form object.
paramsaccessor in your Reflex class
paramsaccessor is available to your
after_reflexcallbacks in your server-side Reflex class. You are also free to add additional business logic on the client using the Reflex life-cycle callbacks in your Stimulus controllers.
paramsaccessor behaves as it does in a Rails controller, so you are free to lock it down and add nested models as you expect:
@postobject is instantiated from
paramsso if model validations fail, your Post model instance is still in scope when the page re-renders. The model's
errorscollection is available in the view. 🐛
data-reflex="change->Post#update"to each field. Since the field is inside the parent
formelement, all inputs are automatically serialized and sent to your Reflex class.
@post.comments.buildand because Rails knows about the association, any re-renders populate the empty form field as normal.
paramsaccessor, pointing to an empty
data-reflex-permanentso that you don't lose UI state when a Reflex is triggered.
<input>fields. You're going to need to clear your form so the user can add more data.
reflex-formand we'll use it to set a target on the first text field, as well as an action on the submit button:
@postobject is created from the
before_reflexcallback, users can click New comment many times to get new empty comments.
data-reflex-permanentwill not be morphed in any way.
formcontext, since it's not just a simple view helper that you can include.
morphthe HTML content required to successfully update the children of your target element. This requires that the outermost element of the supplied HTML matches the parent element:
div, in order to successfully replace the contents of "form_swap" we'll need to wrap it ourselves:
paramsbefore a Reflex
beforeReflexcallback by modifying
element.reflexData[reflexId]before it is sent to the server.