4

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.

3

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:)

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.