1. Fabrik 3.8.1 has been released. It is mostly bug fixes and feature enhancements, but does include two new plugins (push notifications, and the sequence element). As usual we strongly recommend testing the new release on a sandbox if your application is mission critical, and always do an Akeeba backup before updating.
    Dismiss Notice

Dropdown selections unique in repeat group

Jan 20, 2018
Dropdown selections unique in repeat group

  • Disable already used dropdown options in a repeat group(top)

    Suppose that you have a repeat group which has a dropdown element of some type, and you want to try to ensure that each repeat row has a unique value selected for the dropdown.

    The three sets of element javascript below provide full functionality for this.
    • When a dropdown is loaded it disables any of its options that are already in use in the repeat group.
    • When a user changes the value of a dropdown, all the options in all the dropdowns are re-evaluated to disable options that are in use.
    • The same happens when you delete a row.
    Note: This code is compatible with using pre-defined events to make the dropdown readonly or disabled, and is compatible with Fabrik's Enhanced Dropdowns (which use Chosen).

    On load event(top)

    Code (Text):
    /* When this element == "", disable select items which have already been set in other repeat group items */
    if (Fabrik.debug) fconsole('load',this.element.id);
    if (this.element.value === "") {
      var selects = this.element.getParent('.fabrikGroup').getElements('.fabrikRepeatGroup___' + this.origId + ' select');
      selects.each(function (el) {
        if (this.element.id !== el.id) {
          var val = el.value;
          if (val !== '') {
            this.element.getElement('option[value="' + val + '"]').setAttribute('disabled', 'disabled');
          }
        }
      }.bind(this));
    }

    On change event(top)

    Code (Text):
    /* When this element is changed, collect the select items from all matching fields and disable them in other dropdowns */
    if (Fabrik.debug) fconsole('change',this.element.id);
    var values = [];
    var selects = this.element.getParent('.fabrikGroup').getElements('.fabrikRepeatGroup___' + this.origId + ' select');
    selects.each(function (select) {
      var value = select.value;
      if (value !== '' && values.indexOf(value) < 0) {
        values.push(value);
      }
    });
    selects.each(function (select) {
      if (select.getAttribute('readonly') !== 'readonly' && !select.disabled) {
        select.getElements('option').each(function (option) {
          var value = option.value;
          if (!option.selected && value !== '') {
            if (values.indexOf(value) < 0) {
              option.removeAttribute('disabled');
            } else {
              option.setAttribute('disabled', 'disabled');
            }
          }
        });
        jQuery(select).trigger("liszt:updated");
        jQuery(select).trigger("chosen:updated");
      }
    });

    On unload event(top)

    Code (Text):
    /* When this element is deleted, collect the select items from all other matching fields and disable them in other dropdowns */
    if (Fabrik.debug) fconsole('unload',this.element.id);
    var values = [];
    var selects = this.element.getParent('.fabrikGroup').getElements('.fabrikRepeatGroup___' + this.origId + ' select');
    selects.each(function (select) {
      if (this.element.id !== select.id) {
        var value = select.value;
        if (value !== '' && values.indexOf(value) < 0) {
          values.push(value);
        }
      }
    }.bind(this));
    selects.each(function (select) {
      if (select.getAttribute('readonly') !== 'readonly' && !select.disabled) {
        select.getElements('option').each(function (option) {
          var value = option.value;
          if (!option.selected && value !== '') {
            if (values.indexOf(value) < 0) {
              option.removeAttribute('disabled');
            } else {
              option.setAttribute('disabled', 'disabled');
            }
          }
        });
        jQuery(select).trigger("liszt:updated");
        jQuery(select).trigger("chosen:updated");
      }
    }.bind(this));