Loading Essential Grid shortcode with PHP through Ajax

[Dabblesoft]

Ultimately my goal is to load a specific Essential Grid (ESG) shortcode based on a value determined by Modernizr that is then passed through Ajax to PHP which will determine and return the necessary shortcode. My understanding is that this is the correct path to take for this sort of thing, however, I’m still somewhat new to all of web design in general so maybe I’m just going about it the wrong way.

To simplify I’ll just focus on loading an ESG shortcode ([ess_grid alias=“photo-gallery”]) through Ajax. I’ve commented out all extra CSS on that page as well.

So here’s the problem, first I have a Content Area element with the ID: “gallery-test-area”.

Next I have this JS on that page:

jQuery.ajax({
   url: "/wp-admin/admin-ajax.php",
   data: {
      action:'select_gallery_test_ajax',
   },
   success: function(results){
      jQuery('#gallery-test-area').html(results);
   },
   error: function(errorThrown){console.log(errorThrown);}
});

Here is the relevant PHP in my child theme’s “functions.php” file:

function select_gallery_test_ajax(){
   echo do_shortcode('[ess_grid alias="photo-gallery"]');

   die();
}

add_action('wp_ajax_nopriv_select_gallery_test_ajax', 'select_gallery_test_ajax');
add_action('wp_ajax_select_gallery_test_ajax', 'select_gallery_test_ajax');

When you dig down to the Content Area element you can see the result and while most of the code is there it’s like it doesn’t fully load or something.

NOTE: I’ve also tried using a Slider Revolution shortcode instead of ESG and that doesn’t load either.

Is this a bug or am I doing something wrong? I’ve been trying to solve this for days now and have tried many different solutions that have all failed if they don’t involve loading the ESG shortcode immediately on page load. Any ideas are appreciated. Thanks!

[ruenel]

Hello Dan,

Thanks for writing in! Please be advised that Essential Grid or Rev Slider will need to initialize to load the grid items or the slides. It is best that you load the shortcode with the page so that it can initialize and will load as soon as the page load. The necessary css/js scripts of the grid or slider will also be loaded in the page. It is not recommended that you load it via AJAX because it may not be able to initialize and the needed resources will not be loaded.

Please consider a different path as what you have in mind may not be possible.

Regards.

[Dabblesoft]

Ok, I was afraid that. I’ll see what else I can come up with. Thanks for the assistance!

[friech]

Glad we could help, Cheers!