Using jQuery waitUntilExists to modify page elements that aren't available until after DOM Ready

[#1]

Introduction

The increasing use of Angular, Knockout, and other dynamic content libraries has been causing some issues with manipulating and scraping content from page elements that are created after the DOM Ready signal has already fired.

If your site is running jQuery, we can use the waitUntilExists (WUE) plugin to make an extension wait for an element to be created before running its code. This is much more effective than waiting for window.onload because, with some heavier pages, a visitor will have already navigated away before that signal can fire.

The Plugin Code

(function(e, f) {
    var b = {},
        g = function(a) {
            b[a] && (f.clearInterval(b[a]), b[a] = null)
        };
    e.fn.waitUntilExists = function(a, h, j) {
        var c = this.selector,
            d = e(c),
            k = d.not(function() {
                return e(this).data("waitUntilExists.found")
            });
        "remove" === a ? g(c) : (k.each(a).data("waitUntilExists.found", !0), h && d.length ? g(c) : j || (b[c] = f.setInterval(function() {
            d.waitUntilExists(a, h, !0)
        }, 500)));
        return d
    }
})(jQuery, window);

Setting up the Plugin

1. Grab the minified WUE plugin code from GitHub or copy it from above.
2. In your TiQ profile, create a custom JavaScript Code Extension. 
3. Paste in the WUE code. 
4. Scope the extension to Pre Loader.
5. Save/Publish your profile.

Using WUE in Extensions

1. Find an appropriate jQuery selector for the element you need to wait for. IDs are best because they’re usually unique, and WUE will run your code for every instance of a selected element that gets created. If your desired element does not have an ID or is difficult to select, it may be better to select an element with an ID that is loaded after your desired element. This keeps verbosity down and prevents WUE from trying to run multiple times.
2. In TiQ, create a new custom JavaScript Code Extension.
3. Scope the extension
   • either to the Tag that you're scraping data for  
   • or to the Pre Loader scope for any page modifications.
4. Put your JavaScript inside a WUE statement:

$("#yourSelector").waitUntilExists(function() {
    /* Your JS */
});

If your selector is not unique and is likely to set off the WUE statement multiple times, make sure to set up some logic that will ensure that your code only runs on the first (or whichever) passthrough.