-
New Commercial Services Section
We have now opened a commercial services section here on the forum for registered users. If you have a Fabrik project that you wish to have someone work on for you, post it under Help Wanted. If you are an application developer and wish to earn some money helping others, post your details under Fabrik Application Developers.
Both of these are unmoderated. It will be up to both parties to work out the details and come to an agreement.
-
Joomla 5.1
For running J!5.1 you must https://fabrikar.com/forums/index.php?wiki/update-from-github/ or include the new file manually https://fabrikar.com/forums/index.php?threads/joomla-5-1-and-fabrik-cannot-find-files-error.54473/post-285151
Element Javascript (Advanced)
- Views Views: 21,107
- 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'