Ajax Loading (Page caching compatibility)

The Ajax loading/page caching compatibility option allows you to use dynamic content while continuing to enjoy the advantages of caching.

With the Page Caching Compatibility option enabled, dynamic triggers will be rendered in a separate request after the cached version is loaded (you can learn more about how Ajax works here).

Enabling Ajax Loading is possible for all triggers together or for only one specific trigger

There are two options to enable Ajax loading (page caching compatibility): Via the plugin settings for all triggers together or by adding a parameter to the shortcode of a specific trigger.

Enable Ajax page cache loading for all the triggers

If your dynamic content is set up using conditional Elementor elements or Gutenberg blocks, you need to enable Ajax Loading for each element/block separately.

On your WordPress Dashboard, go to If-So > Settings and check the “Render triggers via Ajax” checkbox.

This option will affect all triggers and content created using the CSV Bulks extension. It will not affect conditional Elementor elements and conditional Gutenberg blocks (for them, you should set the Ajax loading separately when you set the element/block).

Enable Ajax for a specific trigger

To make a specific trigger load with Ajax you can add the parameter ajax=”yes” to the trigger shortcode:

[ifso id="123" ajax="yes"]

Want to enable Ajax on a trigger that is embedded using PHP directly in the page template (for developers)? Click here

Does Ajax Loading Mode cause a delay between the appearance of the cache and dynamic content?

When Ajax Loading is enabled, the static content of the page is served from the cache, and the dynamic content is rendered moments after. Naturally, there will be a delay between the loading time of the two.

The length of the delay depends on numerous factors, like the way your site is built, your server, the amount of dynamic content, and so on.

Displaying an animated loader or the default content until the appearance of the dynamic version

If you find that the delay between the loading of the page from the cache and the loading of dynamic content is too long, you might want to show an animated loader or display the default content during this time gap.

You can show the default content or the loader in two ways:

1. Through the plugin’s settings – to all the triggers.
2. By adding a parameter to the trigger’s shortcode – for individual triggers.

Adding the parameter to the shortcode will override the selected option in the plugin’s settings.

Option 1: For all the triggers

1. Go to If-So > Settings on your WordPress dashboard.
2. Find the AJAX Loading Placeholder option and select the loader style.
3. Save the settings at the bottom of the page.

Option 2: For individual trigger

To show a loader animation – Add the parameter loader=”X” to the trigger’s shortcode (possible values instead of X are 0,1, or 2).

Example: [ifso id="123" loader="1"]

Loader styles:

Changing the loader size

Changing the loader size is possible by changing the width and height attributes of the CSS Class .lds-dual-ring:after

.lds-dual-ring:after, ifso-logo-loader:after {
width: 12px;
height: 12px;
}

Aligning the loader to the center

The following code will work in most cases (If it doesn’t work, try setting a width to the element that wraps the trigger).

.lds-dual-ring:after, ifso-logo-loader:after {
display:block;
margin: 5px auto;
}

*If you’d like to inspect the loader using the browser’s “Inspect Element” option you can do it by disabling the JavaScript.

Troubleshooting

In some cases, if you load the dynamic content using Ajax, some of the modules loaded using this method might not function as expected (usually modules that involve JavaScript). Learn more.