0

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!!!

2 Answers 2

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.

1
  • 1
    Dear Antti, thanks so much for your reply, very helpful and informative and it helped me to comprehend what happens with the plug-in during ajax request and render. Yes, there was a special snippet I received from Modula to reinitialize plug-in. And yes, thank you, I would be more careful next time with the topic of my questions, appreciate you pointing it out! Thank you and have a great day!
    – iuriiGav
    Apr 4, 2021 at 0:55
1

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); 
          });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.