1. We suggest you do NOT update to Joomla 3.8.10 until we can resolve an issue it causes with caching in Fabrik. If you do install it, you'll need to disable Joomla's "System Cache" in the global System settings.
  2. Apologies for the recent server outage, a planned migration by our host provider to a new location turned into a bit of a nightmare.

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));