Learn how Scrivito CMS can help you deliver amazing digital experiences
See Scrivito CMS in action

Selecting CMS Content in the DOM

Selecting CMS Content in the DOM

The CMS attribute jQuery selector

For being able to identify HTML tags for editing, we use special CSS classes. This is handy if you want to add special editing behavior to a particular piece of CMS content. However, for making a generic editing utility available to a wide range of CMS content, e.g. to all string fields on a page, all the HTML tags containing string field values need to be identified.

To make this possible, the scrivito_tag helper adds a special DOM attribute, data-scrivito-field-type, to every tag. It contains the type of the CMS attribute for which the tag has been rendered. Thus, we can select all DOM elements that correspond to a particular CMS attribute type, in this case the string type:

$("[data-scrivito-field-type=string]")

Another DOM attribute, data-scrivito-field-name, lets you select DOM elements by a CMS attribute name:

$("[data-scrivito-field-name=title]")

By means of the data-scrivito-field-obj-class DOM attribute it is possible to select those DOM elements whose CMS attribute value comes from a CMS object of a particular object class:

$("[data-scrivito-field-obj-class=News]")

Usually, this selector is combined with the data-scrivito-field-name selector. jQuery lets you build more complex queries taking account of the website layout:

// find the tags containing the title of a News CMS object $("[data-scrivito-field-name=title][data-scrivito-field-obj-class=News]") // find the tags with html content of a BlogPost inside a .main_content tag $("div.main_content [data-scrivito-field-type=html][data-scrivito-field-obj-class=BlogPost]")

The widget jQuery selector

You can identify DOM elements that represent widgets by means of the data-scrivito-widget-obj-class attribute:

$("[data-scrivito-widget-obj-class]")

The content of this DOM attribute is the object class name of the widget. You can use this jQuery selector to find widgets of a particular widget object class, e.g.:

$("[data-scrivito-widget-obj-class=TextWidget]")