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
actions	JSON Handlers – makes a JSON request instead of script	none – request Javascript and eval the response

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
actions	JSON Handlers – makes a JSON request instead of script	none – request Javascript and eval the response

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
actions	JSON Handlers – makes a JSON request instead of script	none – request Javascript and eval the response

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

UI Behaviors

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-.*"]

Ninja.decays()

Tthis 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

Ninja.hasPlaceholder()

Used on text or password inputs, or textareas, this behavior finds a related element with descriptive text, pulls the related element out of the DOM, and uses it as placeholder text on the element. In HTML5 capable browsers, it merely sets the placeholder attribute, but for older browsers we do some pretty standard trickery to produce the desired result. Under consideration are placeholders for select menus.

Configuration		default
textElementSelector	function that returns a selector for the text element associated with this element	returns "*[data-for=" + elem.id + "]"
findTextElement	A function used to find the descriptive element for this input	Finds the first element that matches the result of textElementSelector
findParentForm	A function that finds the parent form of the input
retainedInputAttributes	which attributes to copy from a password field to it’s replacement text field	[ "name", "class", "style", "title", "lang", "dir", "size", "maxlength", "alt", "tabindex", "accesskey", "data-.*" ]

Ninja.triggersOnSelect()

Applied to a form containing a select input, alters the form such that it will submit when the user selects an entry. Removes the submit button, as well.

Configuration		default
placeholderText	Placeholder to put into the select input	"Select to go"
placeholderValue	Largely unimportant: the value of the placeholder option	"instructions"