-
Fabrik Base 4.5 is now available.
See Announcements
Element Javascript (Advanced)
- Views Views: 22,233
- Last updated Last updated:
-
Contents
Introduction
Each element in your form has a Javascript object attached to it. It provides a common interface for managing the element.
When element's are duplicated in a repeating group a new instance of the original element object is created for the duplicated element.
Accessing the element
Elements are contained within their Form's object's formElements property. In turn you can access the form from Fabrik's global namespace. E.g. to access an element called 'users___name' in form 1:
For Fabrik 3.0 or earlier:
var name = Fabrik.blocks['form_1'].formElements.get('users___name');
For Fabrik 3.1+
var name = Fabrik.getBlock('form_1').Elements.get('users___name');
Note that name is an instance of a 'FbElement' class and is not a direct reference to a DOM node which may have the id of 'users___name'.
To ensure that the form and element is loaded before calling them you should wrap your code in inside the following method:
requirejs(['fab/fabrik'], function () {
// This is your form's id:
var formId = 1;
Fabrik.getBlock('form_' + formId, false, function (block) {
// Block is a reference to the Fabrik form 1 object.
var field = block.Elements.get('users___name');
field.addEvent('blur', function () {
alert('you blurred this element');
});
});
});
File locations (of Fabrik core files)
- media/com_fabrik/js/element.js - All Element Javascript objects are children of this 'FbElement' class.
- media/com_fabrik/js/elementlist.js - All 'list' type Elements (dropdown, radio, checkbox, databasejoin) Elements inherit from this class, which in turn inherits from element.js.
- plugins/fabrik_element/{pluginname}/{pluginname}.js - Contains the element specific logic
Element Javascript Methods
var name = Fabrik.getBlock('form_1').formElements.get('users___name');
// Get an element's value:
value = name.get('value');
// Update the value
name.update('new value');
// Update list element values
// This example will select the suboptions with values of 4 and 5,
// and deselect all others
name.update(['4', '5']);
// or since June 2013
name.set('new value');
// Reset to original value
name.reset();
// Clear values:
name.clear();
// Get the <div> that surrounds all the element's DOM nodes:
var container = name.getContainer();
// Get the error message <div>
var error = name.getErrorElement();
// Set the element's error message:
// className can take: 'fabrikValidating', 'fabrikError' or 'fabrikSuccess'
name.setErrorMessage('this is the message', className);
//Show/hide
name.show();
name.hide();
name.toggle();
// Add an event
name.addEvent('blur', function () {
alert('you blurred this element');
});
// Get the repeat group #
name.getRepeatNum();
Note that if you are adding an event inside the element's Javascript tab, then you can reference the element object with the variable 'this'