Skip to content
Judson edited this page Jul 7, 2011 · 24 revisions

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"
Clone this wiki locally