Element Javascript (Advanced)

  • Views Views: 21,108
  • 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