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.
Need Help?
If you are experiencing issues with dynamically-injected gates after following these troubleshooting steps, our technical support team is here to help. Create a new support ticket and we'll assist you with resolving your gate injection issues.