If you are having issues getting gates to work that you have injected onto your webpage dynamically after page load, this short article will help you solve common issues. This is a common scenario when working with React, Vue.js, Angular, A/B testing platforms, or in fact any code that dynamically modifies a webpage after it has already finished loading.
Because the Formulayt installation script only looks for gates on the page as it first loads, any gates subsequently added to the page by one of these frameworks will not be found and processed.
In order to get around this, you should modify your application's code to call the following line of JavaScript whenever you render a new modal or inline gate to the page:
gcdc("loadGates");Because this code will throw an error if the Formulayt scripts have not finished loading, you may want to wrap it in a standard JavaScript try/catch statement. The Formulayt installation scripts will always run this function once as they first load. It is safe to call this function multiple times, and doing so will not duplicate gates, however, you should avoid doing this within a setInterval loop for performance reasons.
Exactly how and where you implement this within your code will depend on your application. Instructions for detecting DOM or model changes and reacting to these within each framework should be detailed in the framework's own documentation. Make sure you run the function after all relevant DOM updates have finished being made.
An extra note on modal gate links
If your code is attempting to add a new gate as a modal link by changing the HREF attribute of a link that already opens a gate, then you will need to remove the gcdc-modal-linked="true" custom data attribute from these links before executing gcdc("loadsGates"); . This attribute is added by the Formulayt script whenever it processes a modal gate link to prevent it from modifying that link again, as a way of improving performance. Removing it effectively resets the links and will allow it to point to a new, different gate.
Got a question about creating gates or having issues? Fear not, Formulayt is on hand, simply click "+ New Support Ticket" above.