Component shortcode in Ajax Load More repeater has no styles

[devyorkchapel]

I’ve created a post tease component and I’m trying to render it inside an ajax load more repeater so i can add a post list with a load more button, but when the components are loaded via ajax, they have no styles.

I noticed in the forum history there are some posts about this happening with gravity forms too.

Is there a workaround or solution to this issue yet?

[Ismael]

Hello @devyorkchapel,

Thank you for the inquiry.

We may need to inspect the site to understand the issue better. Please provide the login details in the secure note, along with any links related to the thread. Screenshots will also be helpful.

Best regards,
Ismael

[devyorkchapel]

Thanks Ismael, I’ve provided the credentials.

If you go into my components, its the “Post Tease” component.

Here is my ajax load more repeater template:

Then, on the page “Sample Page” (pardon the mess, i’m just trying to wrap my head around cornerstone so far), I have a raw content field with my ajax load more shortcode rendering my posts, in the second section.

You can see if you inspect, the component is rendering correctly for each post with the html, classses and post data, etc… but it does not have the styles I assigned in cornerstone (font size, color, etc)

[marc_a]

Hey York,

In order for the styles to load again, it needs to build up the styles. You can add the filter below in your ajax code.

do_action("wp_enqueue_scripts");

Hope that helps.

[devyorkchapel]

So, Ajax Load More has a javascript callback when it refreshes, so I tried adding an admin-ajax function to do_action(“wp_enqueue_scripts”), and it seems to be succeeding, but its not doing anything in regards to the missing styles.

here’s the PHP I added:

add_action('wp_ajax_cornerstone_reenqueue_styles', function() {
    do_action('wp_enqueue_scripts');
    wp_die();
});
add_action('wp_ajax_nopriv_cornerstone_reenqueue_styles', function() {
    do_action('wp_enqueue_scripts');
    wp_die();
});

function my_ajaxurl_script() {
    ?>
    <script type="text/javascript">
        var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
    </script>
    <?php
}
add_action('wp_head', 'my_ajaxurl_script');

And here’s the javascript I added:

<script type="text/javascript">
window.almOnChange = function(alm){
	jQuery.ajax({
        url: ajaxurl, // Make sure ajaxurl is properly defined
        type: 'POST',
        data: {
            action: 'cornerstone_reenqueue_styles'
        },
        success: function(response) {
            console.log('Cornerstone styles reloaded');
        }
    });
}
</script>

You can see it logging success to the console, but the do_action(“wp_enqueue_scripts”) doesn’t seem to be helping with the missing styles.

[Ismael]

Thank you for the update.

Unfortunately, the AJAX Load More plugin is not included in the list of supported plugins (see the link below). You may need to contact the plugin developers for additional assistance or reach out to a third-party developer to make the plugin compatible with the component shortcode. You can also check out our One service.

– https://theme.co/docs/version-compatibility#third-party-extensions

Best regards.

[devyorkchapel]

Right, I understand that which is why I’m trying to roll my own compatibility. ALM is just a shortcut to using ajax to load posts anyway, but from the experiment above, I would bet if I roll my own ajax post loading functionality I’m going to run into the same issue, bc the issue appears to be with Cornerstone.

Happy to go down that route if you’re more comfortable providing support for something that doesn’t involve another third party plugin.

Or, is there a third party plugin for ajax loading and filtering you do support, that works with cornerstone handling the layout and design?

[devyorkchapel]

I figured out a very dumb, but working solution that I can use to move forward at least:

After rendering my ajax load more shortcode on the page, i have a raw content element that i use the same component shortcode in, and I hide it with css. this guarantees that the css associated with the component i’m loading via ajax is already on the page.

I’ll just lock out that element from the client.

[Ismael]

Great! Glad to know that you’ve found a working solution. Let us know if you have more questions.