-
A new version of Full Calendar is now available.
See the details here
Element Javascript
- Views Views: 24,833
- Last updated Last updated:
-
Contents
Fabrik allows you easily to run actions against Javascript events (e.g. change, blur) for Elements. These actions can either be pre-defined actions selected from a dropdown list, or if bespoke Javascript code is provided that is run instead.
Settings
Event
The first thing you need to do is to select a Javascript event to run the action against. The choices are:
- focus - user brought the focus to the object (e.g. clicked on it/tabbed to it).
HTML Elements: a (link), area, label, input, select (dropdown), textarea, button. - blur - user has left the focus of the object (e.g. they clicked or tabbed away from a text field that was previously selected).
HTML Elements: a (link), area, label, input, select (dropdown), textarea, button. - change - user has changed the object, then attempts to leave that field (e.g. clicks elsewhere).
HTML Elements: input, select (dropdown), textarea. - mousedown - the mouse (left) button was pressed down whilst over this element.
HTML Elements: most. - mouseup - the mouse (left) button was released whilst over this element.
HTML Elements: most. - click - user clicked on the object. Mousedown and mouseup events run first.
HTML Elements: most. - dblclick - user clicked twice on the object in quick succession. Click event runs first, usually twice.
HTML Elements: most. - mouseover - the cursor moved over the object (i.e. user hovers the mouse over the object).
HTML Elements: most. - keydown - a key was pressed down with this element active
HTML Elements: most. - keyup - a key was released with this element active
HTML elements: most. - keypress - a key was typed (pressed down and released) with this element active.
HTML elements: most. - select - user selected some or all of the contents of the object (e.g. the user selected some text within a text field).
HTML elements: input, textarea. - load - the element has loaded (usually because the page has just loaded).
HTML elements: body, frameset. - unload - the element has unloaded (e.g. because the user has moved to another page or closed the window).
HTML elements: body, frameset. - abort - occurs when loading of an image is aborted.
HTML elements: image.
Note 2: See W3Schools for more documentation on these events.
Note 3: Blur event also runs if the element has focus but the window loses focus (i.e. users switches to a different browser tab or a different application). Focus event also runs when the window regains focus.
Note 4: Not all events work on every element type.
Note 5: The HTML elements listed above are taken from the W3.org HTML4 specification. If someone would like to change this to Fabrik element types - and maybe document any quirks - that would be great!
Predefined actions
Fabrik provides a selection of pre-defined actions that can be run when the selected event is triggered, most of which are various ways to show or hide other elements based on the value of this element:
- hide
- show
- fadeout
- fadein
- slide in
- slide out
- slide toggle
- clear
- disable (note: field will not be submitted and database entry will be cleared on save)
- enable
- readonly
- not readonly
- Select the type of comparison to make against the value of this element:
- <
- <=
- ==
- >=
- >
- !=
- hidden
- shown
- contains
- does not contain
- regex (any regular expression valid in a standard JS test(//))
- not regex
- Select the value to compare against (not required for hidden or shown).
- Select the action.
- Select the group or element to apply the action to.
Bespoke actions
If you want to perform an action other than the pre-defined ones above, then you can write your own Javascript in the editing box provided.
Note: Do not use single line comments //. Because Fabrik concatenates the lines together, any lines with a // comment on will have all the following lines concatenated and they will then also be treated as comments. Use the /* comment */ format instead.
If the first line in your Javascript is a comment, this comment will be included in the accordion heading for this Javascript in order to make it easy to identify which Javascript to work on when you edit an element with multiple Javascript actions.
You can also send tracing or debug messages to the Javascript console when you have Fabrik JS debgging turned on by using Javascript like:
JavaScript:if (Fabrik.debug) console.log('element_x: onLOAD fired');
Using custom JS files
Create a file form_X.js (X = form id) with functions you need, call the functions in the element's JS box.
https://fabrikar.com/forums/index.php?wiki/form-javascript/#adding-javascript-to-a-form-header
https://fabrikar.com/forums/index.php?wiki/javascript/
Examples
Below are some examples of how bespoke javascript can be used to perform interesting actions:
Identify required fields
On load, set the background for this field to indicate a required field:
JavaScript:/* Set background to indicate required field */
this.element.setStyle('background-color','#FFFF99');
Manual override highlight
Suppose e.g. you calculate the standard price of goods (price_calc), but you want to allow the user to override the price (price_used), and you want to indicate visually that the standard price has been overridden. To make this work you want to make the following things happen:
- When the calculated price is recalculated (because e.g. the quantity has changed), copy the calculated price into the used price (overwriting any overrides previously given).
- When the used price changes, check whether the value is the same as the calculated price or not, and set the background colour of the field accordingly.
price_calc: change:
JavaScript:/* If calculated price is changed, copy to price_used field */
if (Fabrik.debug) console.log('price_calc: CHANGE fired');
/* Get mootools element for this field */
var $calcID = $('list___price_calc');
/* Get value */
var calc = $calcID.textContent || $calcID.innerText;
/* Get mootools element for price_used */
var $usedID = $('list___price_used');
/* Copy value */
$usedID.value = calc;
/* Since we changed the value, trigger any change events on the price_used field */
$usedID.fireEvent('change');
price_used: load and change:
We need to use the same code for both in order to set background both on load (of existing record) and when price_used changes (because either price_calc has changed or user has typed something else in).
JavaScript:/* Set background to indicate manual override */
if (Fabrik.debug) console.log('price_used: CHANGE fired');
var $usedID = $('list___price_used');
var used = $usedID.value;
var $calcID = $('list___price_calc');
var calc = $calcID.textContent || $calcID.innerText;
if (used === calc)
{
/* set background colour to pale green */
$catsID.setStyle('background-color','#CCFFCC');
} else {
/* set background colour to pale yellow */
$catsID.setStyle('background-color','#FFFF99');
}Setting one date depending on an other
https://fabrikar.com/forums/index.php?wiki/setting-one-date-depending-on-an-other/
Javascript calc
For very simple calculations, rather than use an Ajax calc, you might want to use a Change event on input fields to do the calculation and set the calc field value.
Using regex
The regex expression you provide is inserted into code that looks like this:
Code:if (this.element.get('value').test(/your regex here/) { ... perform action ...}
... which allows a lot of flexibility for achieving tests which the other built in tests like =, <, contains, etc can't do. For instance, if you need to test if the element has one of three values - foo, bar and wibble. Rather than create three JS events each testing for one of the values with = (or contains), you can just use one regex, "foo|bar|wibble" (no quotes).
The "not regex" isn't strictly necessary, as it's always possible to create a regex which tests for negation, but often it's not as easy as you'd think. So we provide "not regex", which simply does ...
Code:if (!this.element.get('value').test(/your regex here/) { ... perform action ...}
... so we just test for !test() instead of test(). That way, you can just re-use the same regex for (say) hiding a group as you use for showing it, by using 'regex' on an expression to hide it, and 'not regex' on the same expression to show it. - focus - user brought the focus to the object (e.g. clicked on it/tabbed to it).