How to detect Search Results rendering DOM update

Question

There is a way to attach to an event which will inform us when the search results have been loaded from the server. We can do it like this:

XA.component.search.vent.on("results-loaded", function (data) {
    //logic here
}

The Search Results rendering is using exactly the same event to get the data and then render them on the page.

But how actually known when those results are actually rendered on the page? This might be useful in case if I would like e.g.: attach additional events to HTML elements rendered by rendering.

Answer 1

Here is the small JavaScript code snippet which is using MutationObserver to detect DOM changes:

var observeDOM = (function () {
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver,
        eventListenerSupported = window.addEventListener;
    return function (obj, callback) {
        if (MutationObserver) {
            var obs = new MutationObserver(function (mutations, observer) {
                if (mutations[0].addedNodes.length || mutations[0].removedNodes.length)
                    callback();
            });
            obs.observe(obj, { childList: true, subtree: true });
        }
        else if (eventListenerSupported) {
            obj.addEventListener('DOMNodeInserted', callback, false);
            obj.addEventListener('DOMNodeRemoved', callback, false);
        }
    };
})();

observeDOM(document.querySelector('.search-results'), function () {
    alert('DOM has been changed!');
});

I hope this will be useful to someone:)