PHP.GT

Autosave and background submits

By this point we have covered the main interaction patterns. This page fills in the remaining public directives that we use to fine-tune how requests are triggered and how targets are refreshed.

data-flux="submit" on buttons

We have already used this directive in earlier examples, but it is worth stating the rule plainly: submit belongs on a <button> inside a form.

<form method="post" data-flux="update-inner">
	<input name="title" />
	<button name="do" value="save" data-flux="submit">Save</button>
</form>

When clicked, Flux submits the containing form in the background and includes the clicked button’s name and value in the FormData.

data-flux="autosave" on buttons

Autosave also belongs on a <button>, but the behaviour is different:

<form method="post" data-flux="update-inner">
	<label>
		<span>Title</span>
		<input name="title" />
	</label>
	<button name="do" value="save" data-flux="autosave">Save</button>
</form>

Flux hides the autosave button with its injected stylesheet, then listens for changes within the form. When a field changes, Flux submits the form automatically using that button’s name and value.

This takes our plain HTML save button and converts it to an automatic autosave when JavaScript is running.

Attribute-only refreshes

Sometimes the content of an element doesn’t need changing, but the element’s attributes do. For that, we can use update-attributes:

<button	data-flux="update-attributes" disabled aria-busy="true">Save</button>

When Flux processes the returned document, it removes attributes that no longer exist and applies the fresh attribute set from the matching element.

This is useful for state such as:

  • disabled
  • aria-*
  • class
  • data-*

Combining directives across the page

It’s normal to combine several directives in one interface:

  • a button with submit
  • a wrapper with update-inner
  • a status badge with update-attributes
  • a live clock elsewhere on the page

Flux treats each registered target according to the response type it is handling.

Next up, add drag and drop ordering of lists with drag order.