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:

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
busyElement Determines how we find the element to overlay with a busy spinner
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
busyElement Determines how we find the element to overlay with a busy spinner
Ninja.submitsAsAjaxForm()
dd. 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
busyElement Determines how we find the element to overlay with a busy spinner
Ninja.becomesAjaxLink()
dd. 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.
|\2.Configuration|.default|
|retainAttributes|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|

.dt Ninja.becomesLink()

.dd 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:

retainAttributes
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()
A UI behavior: this element should survive for a little while and then disappear, or else vanish when clicked on.

Configuration:

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

Clone this wiki locally