• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

Element Javascript (Advanced)

  • Views Views: 20,998
  • Last updated Last updated:

Navigation

      Access element (+)
      Birthday element
      Button element
      Calculation element
      Captcha element
      Checkbox element
      Colour Picker element
      Count element (+)
      Database join element
      Date element
      Digg element
      Display text element
      Dropdown element
      Facebook Like element
      Field element
      File Upload element
      Folder element
      Google Map element
      Image element
         Image databese join
      Internal id element
      IP element
      J!Date element
      Kaltura element
      Link element
      Notes element
      OpenStreetMap element
      Picklist element
      Radio Button element
      Rating element
      Sequence element
      Slider element
      Tags element
      Textarea element
      Thumbs element
      Time element
      Timer element
      Timestamp element
      Total element
      User element
      User group element
      Video element
      View level element
      YesNo element
      Youtube element
      Akismet validation
      Is Email validation
      Is Not validation
      Is Numeric validation
      Not empty validation
      PHP validation
      Rsa id
  • 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.
    Finally each plugin has its own file, which is located in:
    • 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'
Back
Top