Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – Essential Grid API Redraw Not Working – Custom Javascript

We recently updated a wordpress site & its plugins on a dev environment and we are having major issues with Essential Grid ever since.

So below is in our custom JS. It essentially is failing on the lines "essapi_19.esredraw();" with the below error in the console:
"Uncaught ReferenceError: essapi_19 is not defined"

We have tried to check the Essential grid support docs, however, they are super unhelpful.
https://www.themepunch.com/essgrid-doc/custom-css-javascript/

Below is our custom JS:

jQuery('.eg-washington-red-element-22, .esg-content.eg-washington-red-element-20, .eg-washington-red-element-20-a').hide();

jQuery('#test-COS .esg-entry-content .esg-content.eg-washington-red-element-20-a').removeClass('eg-washington-red-element-20-a').addClass('eg-washington-red-element-20')




jQuery('body').on('click', '.eg-washington-red-element-21', function() {
  
//var divclass = jQuery(this).attr('class').split(' ')[1];
  
  
  
  jQuery('.esg-content.eg-washington-red-element-20, .eg-washington-red-element-22, .eg-washington-red-element-20-a').hide();
  jQuery('.eg-washington-red-element-21').show();


var $Sibling = jQuery(this).siblings('.esg-content.eg-washington-red-element-20');

  
  //console.log($Sibling)
  
  jQuery($Sibling).slideDown(0,function(){
    jQuery(this).siblings('.eg-washington-red-element-22').show();
    jQuery(this).siblings('.eg-washington-red-element-21').hide();
     essapi_19.esredraw();
      })
  
});
jQuery('body').on('click', '.eg-washington-red-element-22', function() {

var $Sibling = jQuery(this).siblings('.esg-content.eg-washington-red-element-20');


  
    jQuery($Sibling).slideUp(0,function(){
    jQuery('.esg-content.eg-washington-red-element-20, .eg-washington-red-element-22, .eg-washington-red-element-20-a').hide();
    jQuery(this).siblings('.eg-washington-red-element-21').show();
  essapi_19.esredraw();
   })
  
});


//// FIXES LOAD MORE ISSUE - START

jQuery('body').on('click', '.esg-loadmore', function() {
  setTimeout(function(){
    essapi_19.esredraw();
    jQuery('.eg-washington-red-element-22, .esg-content.eg-washington-red-element-20, .eg-washington-red-element-20-a').hide();
    
    jQuery('#test-COS .esg-entry-content .esg-content.eg-washington-red-element-20-a').removeClass('eg-washington-red-element-20-a').addClass('eg-washington-red-element-20');
    
    jQuery('body').on('click', '.eg-washington-bblue-element-21', function() {      
      
      jQuery('.esg-content.eg-washington-red-element-20, .eg-washington-red-element-22, .eg-washington-red-element-20-a').hide();
      jQuery('.eg-washington-red-element-21').show();
      var $Sibling = jQuery(this).siblings('.esg-content.eg-washington-red-element-20');
      //console.log($Sibling)
      jQuery($Sibling).slideDown(0,function(){
        jQuery(this).siblings('.eg-washington-red-element-22').show();
        jQuery(this).siblings('.eg-washington-red-element-21').hide();
         essapi_19.esredraw();
      })
      
    });
    jQuery('body').on('click', '.eg-washington-red-element-22', function() {

    var $Sibling = jQuery(this).siblings('.esg-content.eg-washington-red-element-20');
        jQuery($Sibling).slideUp(0,function(){
        jQuery('.esg-content.eg-washington-red-element-20, .eg-washington-red-element-22, .eg-washington-red-element-20-a').hide();
        jQuery(this).siblings('.eg-washington-red-element-21').show();
        essapi_19.esredraw();
       })
      
    });
    }, 2500);
});
//// FIXES LOAD MORE ISSUE - END

Then the below is provided by ESSGrid to us for the API call.

enter image description here

Please can someone assist. We are not sure what to do to fix this.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So figured out that if you migrate a site containing the Essential Grid plugin, using a tool, it auto adds and _1 (or whatever other number) after the essapi_19 selector part.

    So the new redraw code would be "essapi_19_X.esredraw();"

    This can be found using the dev tools in the browser.


  2. 0

    I added the equivalent of _19 at the end of the my similar code to fix this "essapi_19_19.esredraw();"

    Dont remember why that works

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search