Elements are 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, the appearance and/or functionality of the content loaded via Ajax may be broken. This usually happens when it needs to be initialized with javascript, which by default happens on page load (and so doesn’t affect the Ajax content, since it is loaded later).

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:

Elementor users

If the issue you experience is related to an elementor element, paste the code below on your functions.php file:

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 it has been loaded:

Ifso_ajax_triggers_loaded – Fires when the dynamic content in all the 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.

Example:

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

Workaround (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>