Call a function once form loads

Question

How do we call a function once a Cognito form loads?

The following does not trigger the alert:

Cognito.load("forms", { id: "1" }, function() {
   alert("done");
});

Answer 1

You can use MutationObserver to watch for DOM events and continuously look at Cognito.config.isReady to be TRUE. This will indicate that all DOM elements ("childList" types) of the Cognito form have been loaded - although some Cognito scripts may still subsequently modify some of the DOM elements' attributes ("attribute" types).

    // select the target node
    var target = document.getElementsByClassName('cognito')[0];

    // create an observer instance
    var observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            if (Cognito.config.isReady){
                // stop observing
                observer.disconnect();
                alert('FORM LOADED!');
            };
        });
    });

    // configuration of the observer:
    var config = { attributes: true, childList: true };

    // pass in the target node, as well as the observer options
    observer.observe(target, config);

    Cognito.load("forms", { id: "1" });

Answer 2

The following uses "script.onload = callback" to wait for the Cognito javascript file to load.

http://data.georgia.org/certified-site/update/

http://data.georgia.org/certified-site/js/cognito-lazy.js

However, it then uses a 1 second setTimeout to wait for the HTML to be applied to the DOM. (Any suggestions?)

Lastly, it applies jQuery events for accordion menus. These rely on the Cognioti "Section" elements being placed under H1 titles, which are formatted as green bars.