Minimum system requirements: IE9+.
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>
<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.
Indicates to the user how many character they can type into a field before hitting
<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
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.
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>
#target is checked the DOM will look as follows:
<div mark-if-state="true" mark-if="[name=x]:checked">Some text.</div>
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>