Render Modula Plugin Shortcode On Ajax Request

I am using Modula Plugin to speedup the galleries creation process. It works wonderfully but I don’t understand how to render it correctly on the ajax call. I read through the available posts on rendering shortcodes via ajax, but so far I struggle to implement it in my code. Here is the code I use:

add_action('wp_ajax_nopriv_getHistory', 'getHistory_ajax');
add_action('wp_ajax_getHistory', 'getHistory_ajax');

function getHistory_ajax(){ 
 $args = array(
        'post_type'      => 'gallery',
        'posts_per_page' => -1,
        'meta_query' => array(
            array(
                'key' => 'post_gallery_gallery_year',
                'value' => $festivalQueryYear,
                'compare' => 'LIKE'
                )
            ),
        'meta_key'       => 'post_gallery_gallery_year',
        'orderby'        => 'meta_value_num',
        'order'          => 'DESC',
     
    );
    
    $gallery= new WP_Query($args); 

    if($gallery->have_posts()) : while($gallery->have_posts()): $gallery->the_post();

        $shortcode = get_field('gallery_shortcode');

        echo do_shortcode($shortcode);

    endwhile; wp_reset_postdata(); endif; 

 }

in ajax.js

   $(".festival-year-toggler-js-ajax").on("click", function (e) { 
      $.ajax({
          url: wpAjax.ajaxUrl,
          data: { action: "getHistory", festivalQueryYear },
          type: "POST",
          success: function (data) {
               $('.target-div').html(data);
          },
          error: function (error) {
               console.warn(error);
          },
        });

 })

The result is, the images from the gallery are rendered but without the specified layout, obviously, because the shortcode is not running through its default environment. How can I run this shortcode so that it renders on the ajax call in the same way as on normal page loading?

Thank you so much for your help!!!

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I can only comment on this on a general level as I’m not familiar with the plugin you’re using. (This might also not be the best place to ask this kind of plugin related questions as 3rd party plugins are currently considered off-topic here on WPSE.)

Majority of this kind of plugins I’ve encountered have some kind of javascript (or jQuery), which is executed on page load, which setup the layout, enable lightboxes and other features. After the scripts have run, they are done and don’t care about what happens to the DOM or html afterwards. This means that, if you add new html to the page via Ajax, you need to find a way to fire those same setup scripts again yourself.

$.ajax({
    success: function (data) {
        // add html to the DOM
        $('.target-div').html(data);

        // the basic idea..
        some_vendor_function_to_init_gallery(
            $('.target-div')
        );
    },
});

If these setup scripts are globally available depends on the plugin you’re using. You need to either dig into the plugin’s source code, browse its documentation, and/or contact the plugin author. If the setup script is not in the global scope, then you’re probably out of luck.

Method 2

This is the snippet I got from Modula team to reinitialize the plugin:

var modulaGalleries = jQuery('.modula.modula-gallery'); 
     jQuery.each(modulaGalleries, function () { 
          var modulaID = jQuery(this).attr('id'), 
          modulaSettings = jQuery(this).data('config');
          jQuery('#' + modulaID).modulaGallery(modulaSettings); 
     });

As Antti wrote, it needs to be added like this:

$.ajax({
    success: function (data) {
        // add html to the DOM
        $('.target-div').html(data);
          var modulaGalleries = jQuery('.modula.modula-gallery'); 
          jQuery.each(modulaGalleries, function () { 
          var modulaID = jQuery(this).attr('id'), 
          modulaSettings = jQuery(this).data('config');
          jQuery('#' + modulaID).modulaGallery(modulaSettings); 
          });
});

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0