Content is not functioning correctly while dynamic content is loaded using Ajax

When you choose to load the dynamic content using Ajax, the content is loaded in a separate request to the server after the static content loads from the cache (click here to learn more about how Page Cache works). 

In some cases, JavaScript-based content does not function correctly when loaded using the If-So AJAX option. This happens because JavaScript that is loaded dynamically (via AJAX) does not always execute properly, especially if the script relies on the initial page load to run.

Why Does This Happen?

When a page loads normally, all scripts included in the page’s HTML are executed as part of the initial rendering process. However, when content is loaded dynamically via AJAX:

• The new content is injected into the page, but the JavaScript inside it does not automatically reinitialize.
• Certain scripts may be missing required event listeners or dependencies.
• Some JavaScript libraries (such as jQuery plugins or animations) only execute on the initial page load and do not detect new elements added via AJAX.

Make sure the problem is caused due to the Ajax Loading

To check if the problem is caused by the Ajax loading, go to If-So > Settings (on your WordPress dashboard) and disable the Page Caching Compatibility option. Alternatively, depending on how you have set the dynamic content, you can disable the Ajax loading specifically for the content that’s experiencing problems:

• Dynamic triggers: Add the attribute ajax=”no” to the trigger’s shortcode.
• Gutenberg / Elementor blocks/elements: Make sure the “Ajax Loading” option is off.

Solutions:

Before checking the possible solutions, bear in mind that If-So allows you to disable the Ajax loading for a specific trigger by adding the parameter ajax=”no” to the trigger’s shortcode.

There might be use cases in which page caching is not relevant or crucial, so excluding it from the cache might be the best option. Two popular use cases in which you might prefer excluding the page from the cache:

1. If you are using one of the query-strings conditions (UTM Parameters, the Dynamic Link, or the Page URL conditions) – Most caching plugins do not cache URLs with query strings anyway. If you are using the UTM Parameters, the Dynamic Link, or the Page URL conditions (with query parameters), your pages aren’t cached anyway (or can be cached separately).
2. No significant meaning to the loading speed – If the page on which you use the dynamic content is an internal page with no significant value to its loading speed (your ‘thank-you’ page, for example).

wp_register_script( 'ifso-dummy-enqueue-to-attach-to', '',);
wp_enqueue_script( 'ifso-dummy-enqueue-to-attach-to' );
wp_add_inline_script( 'ifso-dummy-enqueue-to-attach-to', "
document.addEventListener('ifso_ajax_triggers_loaded',function(){
 elementorFrontend.init();
});");

All other cases except Elementor (dev skills are required)

If-so provides javascript events that are fired after the Ajax content has been loaded, making it easy to initialize your content after the dynamic content has been loaded:

ifso_ajax_content_loaded – Fires after any type of dynamic content has been loaded via Ajax – triggers, standalone conditions, and bulks.

Example:

document.addEventListener('ifso_ajax_content_loaded',function(){  document.getElementById('myClickButton').addEventListener('click',myClickCallback);
});

Fire the event only after a specific type of dynamic content was loaded via Ajax

Ifso_ajax_triggers_loaded – Fires when the dynamic content created using If-So triggers present on the page has been loaded.
Ifso_ajax_conditions_loaded –  Fires when the dynamic content in all of the If-So standalone condition widgets (Gutenberg, Elementor) present on the page has been loaded.
ifso_ajax_bulks_loaded –  Fires when dynamic content created using the If-So Bulks (CSV) extension was loaded.

Workaround #1 (for non-developers) – Using CSS to Control Content Visibility Instead of JavaScript Execution

Instead of loading JavaScript-based content dynamically via AJAX, a more reliable approach is to load all versions of the content initially and control visibility using CSS. This ensures that JavaScript executes as expected without needing to reload scripts after the content is inserted.

Step-by-Step Guide to Implement the Solution

1. Assign Unique IDs to the Content Sections
   • Identify the different versions of content that need to be conditionally displayed.
   • Assign unique IDs to each version to enable targeted visibility control (e.g., #versionA, #versionB, etc.).
     
     
2. Use an If-So Trigger to Control Visibility
   • Create an If-So trigger based on the desired condition (e.g., geolocation, user behavior, referral source).
   • Instead of dynamically replacing content via AJAX, use CSS to hide/show sections.
     
     
3. Apply CSS to Hide Content by Default
   • When adding content in Text Mode (HTML mode) inside the If-So trigger, wrap it with <style> tags to ensure visibility is controlled via CSS. For example, the following CSS will hide the section with the ID #versionA.

<style> #versionA { display: none; } </style>

4. Insert the Trigger at the Bottom of the Page
   • The relevant CSS will be excuted based on the triggers condtions.

*Don’t forget: If you were previously using Elementor conditions or other built-in display rules, remove them so that all content versions load together on the page. The If-So trigger will handle visibility instead.

By following this method, you ensure that JavaScript-dependent content functions correctly while still achieving dynamic, condition-based personalization.

Workaround #2 (for non-developers)

A non-elegant solution that works in some cases is to include an invisible (hidden with CSS) copy of the dynamic content and load it without Ajax. This would allow the initialization routine to run in addition to the content loaded with Ajax.

To hide the content from the user, wrap the content in a div with a display:none attribute and apply it to the page inside an HTML/code module.

If you’re not familiar with HTML and CSS, you can copy and paste the following code to your site. Just make sure to replace the trigger’s ID (123) with the ID of your trigger.

[ifso id="123" ajax="yes"]<p style="display:none;">[ifso id="123" ajax="no"]</p>