Behaviors.js

JavaScript libraries that use HTML directives for progressive enhancement

This project is maintained by QuickenLoans

These JavaScript libraries have no dependencies, so you just need to reference one to use it. Since they follow the principle of progressive enhancement they should fall back to vanilla HTML behavior on older browsers.

Minimum system requirements: IE9+.

splice-into

Allows you to submit forms via AJAX and then inserts new information into the current page. Since this library uses CSS selector to target elements, it can operate on several targets at once.

To use it, add splice-into="cssSelector" to any HTML form. The CSS selector should target one or more elements on the current page. Those elements need to have IDs and will only be changed if the target page also has an element with matching ID.

<form action="/whatever/page" splice-into="#placeholder">
<!-- ... -->
</form>

<div id="placeholder">
<!-- this will be updated when you submit the form -->
</div>

or:

<a href="/whatever/page" splice-into="#placeholder">link</a>

<div id="placeholder">
<!-- this will be updated when you click the link -->
</div>

Note: If you add splice-into-ignore attribute to a button, submitting via that button will trigger a normal request instead of AJAX.

Second note: the library currently ignores enctype attribute on forms. Also, it does not yet support HTML5 form-related attributes such as formaction, formmethod and formtarget.

Demos:

characters-left

Indicates to the user how many character they can type into a field before hitting maxlength or data-val-length-max.

<input type="text" id="fieldId" maxlength="10" />
<characters-left in="fieldId" />

When the script runs, characters-left element is filled with the number of characters left until overflow. It also receives overflow attribute, which is set to "true" or "false".

Demo.

include-on-proximity

Allows you to easily implement infinite scrolling. Works by inlining links to the next page.

<div id="page">
    <!-- page content... -->
    <a href="/page/2" include-on-proximity>Next Page</a>
</div>

The script works by targeting the immediate parent element of the link and treating it as the container for appending data. In the above example the script will load /page/2, parse it, find an element with id="page", get its content and replace "Next Page" link with that content.

TLDR: you need a parent tag with consistent ids across all pages.

Using the element with a value (include-on-proximity="[pixels]") will change the default proximity, i.e. how close you need to get to the link before it triggers an AJAX request.

Demo.

mark-if

Puts mark-if-state attribute on the containing element. The attribute will have the value "true" as long as specified CSS selector matches something. It will be set to "false" in the opposite case.

<input type="checkbox" id="target"/>
<div mark-if="#target:checked">Some Text</div>

When #target is checked the DOM will look as follows:

<div mark-if-state="true" mark-if="[name=x]:checked">Some text.</div>

Demo.

disable-if-empty

Disables the control it is applied to if any of the targeted inputs are empty.

<input type="text" id="x" />
<button type="submit" disable-if-empty="#x">Go</button>

Demos: