Scripts that require jQuery are executing before jquery is loaded when using CustomScripts

[ahmad-shahid]

A solution has been presented (ported from https://gccode.ssc-spc.gc.ca/iitb-dgiit/sds/GOCWebTemplates/DotNetTemplates/-/issues/454):

var formSubmit = false;

(function () {
    var a = setInterval(function () {
        if (typeof window.wb === 'undefined') {
            return;
        }
        clearInterval(a);

        $(document).on("wb-ready.wb", function () {
            var x = $("#pageForm").validate();
            x.settings.submitHandler = function (form) {
                if (!formSubmit) {
                    formSubmit = true;
                    form.submit();
                }
            };
        });

    }, 100);
})();

[sgdowney]

The above solution was not 100% successful in resolving the issue. Using the method below is the recommended solution for adding JS files to the page.

WebTemplateModel.HTMLBodyElements.Add(scriptTag)

In addition to the code above, in the JS file I implemented the following code as the JS file was sometimes loading after the wb-ready.wb event has already fired.

function SetOverride() {
    // code to execute after wb-ready.wb event
}
if (wb.isReady) {
    SetOverride();
}
else {
    $(document).on("wb-ready.wb", function () {
        SetOverride();
    });
}

This seems to be reliable based on testing conducted thus far.
wet-boew/wet-boew#9762 (comment)