Overview

Searches for HTML elements with the data-ref attribute.
Returns an object whose key is the data-ref attribute value and whose value is the HTML element.

Reference

Parameters:
  • rootElement: string|JQuery|HTMLElement
    Selector, element, or jQuery object of the search source context. Default is document.body.
  • options.asHtmlElement?: boolean
    If true, the element collection is obtained as an HTML element; if false, the element collection is obtained as a JQuery object. Default is false.
Return:
  • [key: string] any The key is the data-ref attribute value and the value is the HTML element object.

Basic

Search for HTML elements. An object whose key is the data-ref attribute value and whose value is the jQuery element is returned as the result. 
              <form data-ref="person">
  <input data-ref="firstName">
  <input data-ref="lastName">
  <input data-ref="gender">
  <input data-ref="zip">
  <input data-ref="town">
</form>
            
              import {components} from 'metronic-extension';

// Get references to elements with data-ref attributes.
const ref = components.selectRef();
            
              {
  firstName: JQuery<HTMLInputElement>,
  gender: JQuery<HTMLInputElement>,
  lastName: JQuery<HTMLInputElement>,
  person: JQuery<HTMLFormElement>,
  town: JQuery<HTMLInputElement>,
  zip: JQuery<HTMLInputElement>
}

As HTML elements

Retrieve search results as pure HTML elements. To retrieve search results as pure HTML elements, set {asHtmlElement: true} in the second parameter. 
              <form data-ref="person">
  <input data-ref="firstName">
  <input data-ref="lastName">
  <input data-ref="gender">
  <input data-ref="zip">
  <input data-ref="town">
</form>
            
              import {components} from 'metronic-extension';

// Get references to elements with data-ref attributes.
const ref = components.selectRef('body', {asHtmlElement: true});
            
              {
  firstName: HTMLInputElement,
  gender: HTMLInputElement,
  lastName: HTMLInputElement,
  person: HTMLFormElement,
  town: HTMLInputElement,
  zip: HTMLInputElement
}

Nested elements

Get nested objects by setting data-ref attribute in dot notation. 
              <form id="person">
  <input data-ref="person.name.firstName">
  <input data-ref="person.name.lastName">
  <input data-ref="person.gender">
  <input data-ref="person.zip">
  <input data-ref="person.town">
</form>
            
              import {components} from 'metronic-extension';

// Get references to elements with data-ref attributes.
const ref = components.selectRef('#person');
            
              {
  person: {
    gender: JQuery<HTMLInputElement>,
    name: {
      firstName: JQuery<HTMLInputElement>,
      lastName: JQuery<HTMLInputElement>
    },
    town: JQuery<HTMLInputElement>,
    zip: JQuery<HTMLInputElement>
  }
}