Apply a 'table'-class to a WooCommerce table after AJAX-call

You could use the Mutation Observer API to listen for changes to a wrapper element's contents and re-apply the table classes.

This example is lifted nearly verbatim from the sample code on MDN. Clicking the button replaces the contents of the div, which you can see from the console output fires the observer callback.

// Select the node that will be observed for mutations
const targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
const config = {
  childList: true,
  subtree: true
};

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
  for (let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('A child node has been added or removed.');
    }
  }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

function doUpdate() {
  targetNode.innerText = Math.random();
}

document.querySelector('button').addEventListener('click', doUpdate);
<div id="some-id">(container)</div>
<button>change</button>

Tags:

Javascript

Jquery

Woocommerce

Recent Posts