• 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

  • Views Views: 23,759
  • 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
  • Fabrik allows you easily to run actions against Javascript events (e.g. change, blur) for Elements. These actions can either be pre-defined actions selected from a dropdown list, or if bespoke Javascript code is provided that is run instead.

    Settings​

    element_javascript.jpg


    Event​

    The first thing you need to do is to select a Javascript event to run the action against. The choices are:
    • focus - user brought the focus to the object (e.g. clicked on it/tabbed to it).
      HTML Elements: a (link), area, label, input, select (dropdown), textarea, button.
    • blur - user has left the focus of the object (e.g. they clicked or tabbed away from a text field that was previously selected).
      HTML Elements: a (link), area, label, input, select (dropdown), textarea, button.
    • change - user has changed the object, then attempts to leave that field (e.g. clicks elsewhere).
      HTML Elements: input, select (dropdown), textarea.
    • mousedown - the mouse (left) button was pressed down whilst over this element.
      HTML Elements: most.
    • mouseup - the mouse (left) button was released whilst over this element.
      HTML Elements: most.
    • click - user clicked on the object. Mousedown and mouseup events run first.
      HTML Elements: most.
    • dblclick - user clicked twice on the object in quick succession. Click event runs first, usually twice.
      HTML Elements: most.
    • mouseover - the cursor moved over the object (i.e. user hovers the mouse over the object).
      HTML Elements: most.
    • keydown - a key was pressed down with this element active
      HTML Elements: most.
    • keyup - a key was released with this element active
      HTML elements: most.
    • keypress - a key was typed (pressed down and released) with this element active.
      HTML elements: most.
    • select - user selected some or all of the contents of the object (e.g. the user selected some text within a text field).
      HTML elements: input, textarea.
    • load - the element has loaded (usually because the page has just loaded).
      HTML elements: body, frameset.
    • unload - the element has unloaded (e.g. because the user has moved to another page or closed the window).
      HTML elements: body, frameset.
    • abort - occurs when loading of an image is aborted.
      HTML elements: image.
    Note 1:Fabrik does not currently support all HTML events - the list above only covers most HTML4 events, and does not include any HTML5-specific events.
    Note 2: See W3Schools for more documentation on these events.
    Note 3: Blur event also runs if the element has focus but the window loses focus (i.e. users switches to a different browser tab or a different application). Focus event also runs when the window regains focus.
    Note 4: Not all events work on every element type.
    Note 5: The HTML elements listed above are taken from the W3.org HTML4 specification. If someone would like to change this to Fabrik element types - and maybe document any quirks - that would be great!


    Predefined actions​

    Fabrik provides a selection of pre-defined actions that can be run when the selected event is triggered, most of which are various ways to show or hide other elements based on the value of this element:
    • hide
    • show
    • fadeout
    • fadein
    • slide in
    • slide out
    • slide toggle
    • clear
    • disable (note: field will not be submitted and database entry will be cleared on save)
    • enable
    • readonly
    • not readonly
    To use these:
    1. Select the type of comparison to make against the value of this element:
      • <
      • <=
      • ==
      • >=
      • >
      • !=
      • hidden
      • shown
      • contains
      • does not contain
      • regex (any regular expression valid in a standard JS test(//))
      • not regex
    2. Select the value to compare against (not required for hidden or shown).
    3. Select the action.
    4. Select the group or element to apply the action to.

    Bespoke actions​

    If you want to perform an action other than the pre-defined ones above, then you can write your own Javascript in the editing box provided.

    Note: Do not use single line comments //. Because Fabrik concatenates the lines together, any lines with a // comment on will have all the following lines concatenated and they will then also be treated as comments. Use the /* comment */ format instead.

    If the first line in your Javascript is a comment, this comment will be included in the accordion heading for this Javascript in order to make it easy to identify which Javascript to work on when you edit an element with multiple Javascript actions.

    You can also send tracing or debug messages to the Javascript console when you have Fabrik JS debgging turned on by using Javascript like:
    JavaScript:
    if (Fabrik.debug) console.log('element_x: onLOAD fired');

    Using custom JS files​

    Create a file form_X.js (X = form id) with functions you need, call the functions in the element's JS box.
    https://fabrikar.com/forums/index.php?wiki/form-javascript/#adding-javascript-to-a-form-header
    https://fabrikar.com/forums/index.php?wiki/javascript/

    Examples​

    Below are some examples of how bespoke javascript can be used to perform interesting actions:

    Identify required fields​

    On load, set the background for this field to indicate a required field:
    JavaScript:
    /* Set background to indicate required field */
    this.element.setStyle('background-color','#FFFF99');

    Manual override highlight​

    Suppose e.g. you calculate the standard price of goods (price_calc), but you want to allow the user to override the price (price_used), and you want to indicate visually that the standard price has been overridden. To make this work you want to make the following things happen:
    1. When the calculated price is recalculated (because e.g. the quantity has changed), copy the calculated price into the used price (overwriting any overrides previously given).
    2. When the used price changes, check whether the value is the same as the calculated price or not, and set the background colour of the field accordingly.
    To achieve this we use the following javascript actions:

    price_calc: change:
    JavaScript:
    /* If calculated price is changed, copy to price_used field */
    if (Fabrik.debug) console.log('price_calc: CHANGE fired');
    /* Get mootools element for this field */
    var $calcID = $('list___price_calc');
    /* Get value */
    var calc = $calcID.textContent || $calcID.innerText;
    /* Get mootools element for price_used */
    var $usedID = $('list___price_used');
    /* Copy value */
    $usedID.value = calc;
    /* Since we changed the value, trigger any change events on the price_used field */
    $usedID.fireEvent('change');

    price_used: load and change:
    We need to use the same code for both in order to set background both on load (of existing record) and when price_used changes (because either price_calc has changed or user has typed something else in).
    JavaScript:
    /* Set background to indicate manual override */
    if (Fabrik.debug) console.log('price_used: CHANGE fired');
    var $usedID = $('list___price_used');
    var used = $usedID.value;
    var $calcID = $('list___price_calc');
    var calc = $calcID.textContent || $calcID.innerText;
    if (used === calc)
    {
    /* set background colour to pale green */
    $catsID.setStyle('background-color','#CCFFCC');
    } else {
    /* set background colour to pale yellow */
    $catsID.setStyle('background-color','#FFFF99');
    }

    Setting one date depending on an other​

    https://fabrikar.com/forums/index.php?wiki/setting-one-date-depending-on-an-other/

    Javascript calc​

    For very simple calculations, rather than use an Ajax calc, you might want to use a Change event on input fields to do the calculation and set the calc field value.

    Using regex​

    The regex expression you provide is inserted into code that looks like this:

    Code:
    if (this.element.get('value').test(/your regex here/) { ... perform action ...}

    ... which allows a lot of flexibility for achieving tests which the other built in tests like =, <, contains, etc can't do. For instance, if you need to test if the element has one of three values - foo, bar and wibble. Rather than create three JS events each testing for one of the values with = (or contains), you can just use one regex, "foo|bar|wibble" (no quotes).

    The "not regex" isn't strictly necessary, as it's always possible to create a regex which tests for negation, but often it's not as easy as you'd think. So we provide "not regex", which simply does ...

    Code:
    if (!this.element.get('value').test(/your regex here/) { ... perform action ...}

    ... so we just test for !test() instead of test(). That way, you can just re-use the same regex for (say) hiding a group as you use for showing it, by using 'regex' on an expression to hide it, and 'not regex' on the same expression to show it.
Back
Top