Standard Behaviors

There are a number of pre-packaged behaviors available for NinjaScript. These can be used in two general forms:

Ninja.behavior({
"#my_el": Ninja.submitsAsAjax,
"#other": Ninja.submitsAsAjax({busyElement: "#busy"})
})

The first uses all the defaults for the behaviors, the second lets you pass configuration details (in this case the target for a busy overlay.) Notice that in the first form, you’re simply passing a function reference in to Ninja.behavior, which will be called without arguments to get the behavior.

The behaviors that ship with Ninjascript:

AJAX Behaviors

Ninja.submitsAsAjax()

The targeted link or form is set up so that it submits via a XMLHTTPRequest object. We expect back a javascript snippet which is eval’d. (yeah, yeah) This is a Metabehavior for submitsAsAjaxForm and submitsAsAjaxLink. In this case, the Metabehavior looks to see if the element under consideration is a link or a form and applies the appropriate behavior.

Configuration		default
busyElement	Determines how we find the element to overlay with a busy spinner	undefined – use the resulting link

Ninja.submitsAsAjaxLink()

Converts a link to send its GET request via Ajax – we assume that we get Javascript back, which is eval’d. While we’re waiting, we’ll throw up a busy overlay if configured to do so. By default, we don’t use a busy overlay.

In general, you’ll want to use submitsAsAjax instead, since it’ll behave correctly regardless.

Configuration		default
busyElement	Determines how we find the element to overlay with a busy spinner	undefined – use the resulting link

Ninja.submitsAsAjaxForm()

Converts a form to send its request via Ajax – we assume that we get Javascript back, which is eval’d. We pull the method from the form: either from the method attribute itself, a data-method attribute or a Method input. While we’re waiting, we’ll throw up a busy overlay if configured to do so. By default, we use the form itself as the busy element.

In general, you’ll want to use submitsAsAjax instead, since it’ll behave correctly regardless.

Configuration		default
busyElement	Determines how we find the element to overlay with a busy spinner	undefined – use the resulting link

Ninja.becomesAjaxLink()

This is a chaining of submitsAsAjax and becomesLink. Applied to a form (normally without visible inputs), it yanks the form itself out of the DOM, replacing it with an

<a href='#'>...</a>

that will submit the original form via Ajax.

Configuration		default
retainedFormAttributes	An array of strings that lists the attributes to copy from the original form into the link.	["id", "class", "lang", "dir", "title", "rel", "data-.*"]
busyElement	How to find the element that should be overlayed with a spinner	undefined – use the resulting link

Ninja.becomesLink()

Applied to a form (normally without visible inputs), it yanks the form itself out of the DOM, replacing it with an

<a href='#'>...</a>

that will submit the original form. The result is that you can use a link to do non-GET requests, but still have it degrade nicely when Javascript isn’t available. Handles image submits as well.

Configuration		default
retainedFormAttributes	An array of strings that lists the attributes to copy from the original form into the link.	["id", "class", "lang", "dir", "title", "rel", "data-.*"]

UI Behaviors

Ninja.decays()

A UI behavior: this element should survive for a little while and then disappear, or else vanish when clicked on.

Configuration		default
lifetime	How long the element survives before being removed automatically (in millis)	10000
diesFor	The duration of the “die” animation (ms)	600