Skip to end of metadata
Go to start of metadata

TDI-fication of HTML elements

HTML elements, which should be served by TDI, must be marked with "tdi" CSS class 

Turbocharged elements

Supported HTML elements

  • links
  • forms
  • selected form elements - text input, select, checkbox and radio button

Setting the target URL for an AJAX request

The target of the HTML element will be used as a target for AJAX request by default. That means using href value for links and action value for forms.

In case another target for an AJAX request should be used (or in case an element has no target, i.e. form elements), it is possible to set the AJAX request target using data-ajax-url attribute. This attribute always has higher priority than element target (href, action).

Related elements

An HTML element, which has invoked TDI action (TDI source element) is informed about the TDI process flow, the state of the requests and responses. This information can be used for example for applying css style to the element (spinning pinwheel).

If it is required to inform other elements about the TDI process flow, it is possible to use the following HTML attributes on the source element:

  • data-related-element - CSS selector (mostly ID selector) for setting related elements. The selector is applied to the whole document. For example, data-related-element="#basket-container"
  • data-related-ancestor - CSS selector for finding the TDI source element ancestor. The closest ancestor, which suits the CSS selector, is found. For example, data-related-element="tr"

All related elements are informed about the TDI process flow the same way as TDI source element is.

HTML attributes used in TDI

AttributeCould be used forDescription
hrefTDI links

TDI link target. The attribute is going to be used as a TDI request target.

actionTDI forms

TDI form target. The attribute is going to be used as a TDI request target.

data-ajax-urlAll TDI elements¹

TDI form target. Attribute has higher priority than href and action attributes. It is used when the target of the TDI request must be different from TDI element target or when the TDI element has no target.

data-related-elementAll TDI elements¹

CSS selector (mostly ID selector) for finding related elements. The selector is applied to the whole document. All related elements are informed about the TDI process flow the same way as TDI source element is. For example, data-related-element="#basket-container"

data-related-ancestorAll TDI elements¹

CSS selector for finding the TDI source element ancestor. The closest ancestor, which suits the CSS selector, is found. All related elements are informed about the TDI process flow the same way as TDI source element is. For example, data-related-element="tr"

data-confirmAll TDI elements¹

Confirm message. It allowes confirning or rejecting of a TDI action. In case of rejection no TDI request will be sent to the server.

disabledTDI forms a TDI form elements

No TDI action will be invoked in case this attribute is set.

class="disabled"All TDI elements¹ Stejně jako disabled atribut. Lze použít na TDI elementy, které nepodporují disabled atribut. Same as disabled attribute. CAn be used for elements, which doesn't support the disabled attribute.

1 see Supported HTML elements

  • No labels