Running Delayed Scripts at OnLoad

A major issue with running any sort of script from OnLoad is that we can't always rely on a specific target element actually being in place on the page at the time of the OnLoad ruleset. Many components have a delayed loading sequence, so don't appear on the page for several seconds.

So if the developer has coded to modify an element on the page directly within an OnLoad ruleset (eg a div element of id 'divTestX', $('#divTestX').text = 'hello world';), nothing may actually happen, because at the time this script runs, the target element does not yet exist on the page to modify.

To address this issue, there is a RulesetInclude, "Delayed Script JS". This RulesetInclude provides a method of running a javascript or jquery function on the page, from an OnLoad ruleset, but will wait until a particular element is available on the page before running.

Installation

A release document is currently available (2018-09-11)
https://comp-dev.formbird.com/form/451c64e0-b550-11e8-9268-a1bbef10f60c ¹

• Save the attached file to your computer.
• Run Template Editor on the target Formbird system
• Upload the saved file; click Save.

(nb: please check if there is a later version available)

¹ nb: may not be available to all readers

Usage

• Include the new ruleset include document in your OnLoad ruleset

#include "Delayed Script JS",    // provides object ft3.delayedScript 

• To call, define the JQuery selector for the element you want to ensure is there, and script your function, using the method ft3.delayedScript.runDelayedFunction .

Example:

  // ASSUMING JAYRULE SCRIPT USED
  //ft3.delayedScript.timeout = 5000;
  //ft3.delayedScript.maxTries = 8;

  ft3.delayedScript.runDelayedFunction(ntf, 'div#divTestX', function() { 
    ntf.logger.info('divTestX now on the page');

    var $divTestX = $('div#divTestX');
    $divTestX.html('<b>this field is now changed</b>');
  });

Syntax

ft3.delayedScript.runDelayedFunction(ntf, selector, function() {
    script-to-run
});

Parameters

delayedScript.timeout = timeout-in-ms;

Set the required timeout in milliseconds. The function will stop checking if the target element is there after the set time.

delayedScript.maxTries = nbr-retries;

Set the maximum number of tries to find the target element. Each try takes 0.5 seconds.