-
Fabrik Base 4.5 is now available.
See Announcements
Javascript
- Views Views: 27,533
- Last updated Last updated:
-
Sub-pages:
Contents
Fabrik can be greatly extended with the use of JavaScript to code complex interactions.
You can add custom js files to your list, form and details views
Javascript location
Custom javascript files should be located in:
/components/com_fabrik/js
Lists
For Lists you should name your file list_X.js where X is the list's id.
Note: For backwards compatibility, if you are still using the depreciated table_X.js files then these are loaded in preference to list_X.js files.
Forms
Fabrik 2.x and 3.0:
For Forms and details views your file should be form_X.js where X is the form's id.
Fabrik 3.1 onwards:
In Fabrik 3.1, Details views have their own templates so for details views your file should de details_X.js where X is the details view's form id.
For form views your file should be still be form_X.js where X is the form's id.
Note: For backwards compatibility, if you are using simply X.js files then these are loaded in preference to form_x.js / details_x.js files
In Fabrik 3.1 we create separate JavaScript objects for each form found on the page, this means that you can potentially have 2 Forms which display different records on the same page, for example:
Fabrik.blocks['form_8'] - a 'create new entry' form
Fabrik.blocks['form_8_1'] - controls the form which is editing record id=1
Its probable that you want to use the same JavaScript for both of these form objects. To achieve this you should use the following script located in components/com_fabrik/js/form_8.js:
JavaScript:
/**
* Ensure that Fabrik's loaded
*/
requirejs(['fab/fabrik'], function (Fabrik) {
// The block you want to use
var blockRef = 'form_8';
// Should we use an exact match for the blockRef?
var exact = false;
var form = Fabrik.getBlock(blockRef, exact, function (block) {
// This callback function is run once the block has been loaded.
// The variable 'block' refers to Fabirk.blocks object that controls the form.
var v = block.Elements.get('tablename___elementname').get('value');
// If your element is in a repeat group its name is prefixed with _0, _1, _2 etc - to get all element values in an array....
var values = [];
Object.each(block.Elements, function (element, key) {
if (key.contains('tablename___elementname')) {
values.push(element.get('value'));
}
});
});
});
If you wanted to target only Fabrik.blocks['form_8'] you would use:
JavaScript:
/**
* Ensure that Fabrik's loaded
*/
requirejs(['fab/fabrik'], function (Fabrik) {
// The block you want to use
var blockRef = 'form_8';
// Should we use an exact match for the blockRef?
var exact = true;
var form = Fabrik.getBlock(blockRef, exact, function (block) {
// This callback function is run once the block has been loaded.
// The variable 'block' refers to Fabirk.blocks object that controls the form.
var v = block.Elements.get('tablename___elementname').get('value');
});
});
See also https://fabrikar.com/forums/index.php?wiki/form-javascript
Hiding Groups of Elements using the form_x.js file (tested with Fabrik 4.x and Joomla 4.x)
Then on the yes/no element in this case onload and onchange call up the function using:JavaScript:
function hidegroups(el){
var otherOrg = el.form.formElements.get('aaa_registration___other_org').getValue();
if (otherOrg == 1) {
jQuery(document.id('group6')).addClass('fabrikHide');
jQuery(document.id('group7')).addClass('fabrikHide');
jQuery(document.id('group8')).addClass('fabrikHide');
jQuery(document.id('group9')).addClass('fabrikHide');
jQuery(document.id('group15')).removeClass('fabrikHide').show();
} else {
jQuery(document.id('group6')).removeClass('fabrikHide').show();
jQuery(document.id('group7')).removeClass('fabrikHide').show();
jQuery(document.id('group8')).removeClass('fabrikHide').show();
jQuery(document.id('group9')).removeClass('fabrikHide').show();
jQuery(document.id('group15')).addClass('fabrikHide');
}
}
JavaScript:
hidegroups(this);
If you you have Validation such as 'notempty' on Elements that are being hidden then you can add a condition to the element to make sure they dont get validated when hidden.
PHP:
if ('{aaa_registration___other_org_raw}' == '1')
{
return true;
}
else{
return false;
}