I recently added AJAX functionality to a new website to dynamically load and insert Wordpress page content using AJAX.
However, I encountered an issue where some CSS styles that were supposed to be loaded in the page head were not being applied. This resulted in missing effects and transitions when navigating between pages.
For example, when clicking on the "Greenlands" -> "Information" page, sometimes the font wouldn't load due to bootstrap.css not being loaded, or the content wouldn't display in columns because js_composer.min.css was missing. Reloading the page fixed these issues and all styles appeared correctly.
If you take a look at the source code before and after reloading:
<div class="wpb_column vc_column_container vc_col-sm-3 catlistli visible">
Before reloading:
https://i.stack.imgur.com/uPWAI.png
After reloading:
https://i.stack.imgur.com/wzUYg.png
It seems that the issue lies in the js_composer.min.css file not being applied initially, but working properly after a page refresh.
I attempted to add the necessary CSS manually with jQuery like so:
jQuery('<link>')
.appendTo('head')
.attr({
type: 'text/css',
rel: 'stylesheet',
href: '/wp-content/themes/html5blank-child/css/bootstrap.min.css'
});
However, this did not solve the problem as the styles were still not loading properly during the initial AJAX load.
Before (on initial AJAX load):
https://i.stack.imgur.com/GRRHb.jpg
After (Once you refreshed the page):