User Macros access dynamic AJAX content on the page to process DOM Manipulation

[mbeda_summitracing_com]

Was looking everywhere for a way to create a lazy load DOM access object. That worked within confluence using JS in a User Macro.

This is used to allow you to access content in a page that is getting dynamically loaded through AJAX or some other means. "DOMObject" is the query selector you need to attach to or that needs loaded first. It will check every 1 (1000) second for 9 (9000) seconds to see if the element exists on the page. Once it is found it will run the Code defined.

AJS.toInit(function () {
        ElementLoadedCheck(".DOMObject",function(){All();},1000,9000);
        function All(){
            //Your Code Here
        }
   
        function waitForElementToDisplay(selector, callback, checkFrequencyInMs, timeoutInMs) {
            var startTimeInMs = Date.now();
            (function loopSearch() {
                if (document.querySelector(selector) != null) {
                callback();
                return;
                }
                else {
                setTimeout(function () {
                    if (timeoutInMs && Date.now() - startTimeInMs > timeoutInMs)
                    return;
                    loopSearch();
                }, checkFrequencyInMs);
                }
            })();
        }
});

ElementLoadedCheck

[mbeda_summitracing_com · Accepted solution]

Answer provided in Initial Post