1

I'm working on a site built in WordPress/WooCommerce. I didn't ask this question on the WordPress-StackExchange since the question isn't about the WordPress-/WooCommerce-part.

On the site, there are a few <table>'s, that needed styling. So I added this jQuery-snippet, to add the .table-class to all the tables (found here).

jQuery(document).ready(function(){
  // Make all tables into Bootstrap-tables
  jQuery( 'main' ).find( 'table' ).each( function() {
      jQuery( this ).addClass( 'table' );
    }
  );
});

However... On one of the pages (the cart), there is an AJAX-request that updates the cart. And when it returns the new information, then the table no longer has the class (or the stylings).

I would hate to style that table manually, when everthing is 'right there', delivered from Bootstrap.

I considered these two options:

  • A) Add something to my script, that checks for AJAX-request or something like that? And if so, - how do I do that?

or

  • B) Do something, so the Bootstrap-styles applied to all <table>-elements (and not just <table class='table'>-elements? And if so, - how do I do that? Changing bootstrap.min.css seem like a bad idea.

They both seem hacky/clumbsy. Am I missing a better way of doing this?

Zeth
  • 2,273
  • 4
  • 43
  • 91

1 Answers1

2

you can use ajaxComplete

this work when every ajax request completes.

$( document ).ajaxComplete(function( event, xhr, settings ) {
      $("table").addClass("table");
});
mahradbt
  • 364
  • 1
  • 2
  • 12