# [Usage](../../../usage.md) > Universal observer
Use the universal observer when your custom JS must also run on content added later — polled tables, repeater rows, AJAX modals — without attaching heavy listeners per element. Define `window.kfwCustomObserver(root)` once (e.g. next to `<x-kfw::assets />`); the framework calls it after every `kfwReloadComponentsOnce(root)` alongside Flatpickr/Select2 init. Pairs with [Simple popup](simple_popup.md) hints on dynamic nodes.

K-Framework has a universal Javascript observer that listen for any changes in the page. You can leverage it by placing the code you need in a custom defined function:

```javascript
window.kfwCustomObserver = function execute(root) {
    // do code here
};
```

In that way, you can add listeners to the document, without cycling or add heavy listeners to each element.  
Particularly useful when polling views, and something needs to be applied automatically to the content, using low computing power once.  
You can call the function to execute as you want, `root` is usually the `document`.


Example to initialize FlatPickr element used by the framework:
```javascript
window.kfwCustomObserver = function functionToExecute(root) {
    $(root).find('input.date, input[type="date"]').each(function () {
        if (this.dataset?.kfwFlatpickrAlt === "1" && !this._flatpickr) return;

        const uuid = this.dataset.kfwFlatpickrUuid || (this.dataset.kfwFlatpickrUuid = ((window.crypto && window.crypto.randomUUID) ? window.crypto.randomUUID() : (Date.now().toString(36) + Math.random().toString(36).slice(2))));
        this.dataset.kfwFlatpickrOwner = "1";

        if (!this._flatpickr) {
            flatpickr(this, {
                locale: appLocale,
                allowInput: true,
                disableMobile: true,
                altInput: true,
                dateFormat: "Y-m-d",
                altFormat: appLocale === "it" ? "d/m/Y" : "Y-m-d",
                onReady: function (_, __, fp) {
                    if (fp?.input) fp.input.dataset.kfwFlatpickrAlt = "1";
                    if (fp?.altInput) fp.altInput.dataset.kfwFlatpickrAlt = "1";
                    if (fp?.calendarContainer) {
                        fp.calendarContainer.dataset.kfwFlatpickrUuid = uuid;
                        fp.calendarContainer.dataset.kfwFlatpickrGenerated = "1";
                    }
                    if (fp?.altInput) {
                        fp.altInput.dataset.kfwFlatpickrUuid = uuid;
                        fp.altInput.dataset.kfwFlatpickrGenerated = "1";
                    }
                }
            });
        }
    });
};
```

## Example

Minimal Blade + JS: highlight new rows wherever they are injected:

```html
<!-- Blade layout (once) -->
<x-kfw::assets />
<script>
window.kfwCustomObserver = function (root) {
    (root || document).querySelectorAll('[data-highlight]:not([data-hl-done])').forEach(function (el) {
        el.dataset.hlDone = "1";
        el.classList.add('flash');
        setTimeout(() => el.classList.remove('flash'), 1200);
    });
};
</script>
```

```html
<!-- Any polled / repeater row -->
<div data-highlight popup-message="Just updated">Order #123</div>
```

## See also

- [Usage](../../../usage.md)
- [Simple popup](simple_popup.md) — `popup-message` hints work on observed nodes
- [Registering assets](registering_assets.md) — where to place the observer script
- [Session messages](session_messages.md) — action feedback alongside DOM updates