CODEWITHSUNDEEP
javascriptjqueryfunctiondynamic
mudraya katusha
mudraya katusha

Reputation: 171

how to use a function when page is dynamically reloaded

For sorting a table, I use a tablesorter like below:

<div class="dynamic-content">
    <table>
      <!-- code goes here -->
    </table>
</div> <!-- this div reloads only -->

<script src="tablesort.js"></script>

$('table').tableSort();

The problem: the page is dynamically reloaded, so after an ajax call, it does not work anymore. How can I make this still work when page is dynamically reloaded?

Upvotes: 0

Views: 26

Answers (2)

duc mai
duc mai

Reputation: 1422

if you do not want or cannot listen on the ajax request that makes the changes then you can observe on the change to the dynamic div and sort the table again. you can use Mutation observer as mentioned here https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver.

I also prepare a codesandbox to demonstrate https://codesandbox.io/s/w055v284r5

Upvotes: 0

thopaw
thopaw

Reputation: 4054

What you did is calling $('table').tableSort(); once.

When the table data is changed by an ajax request you have to call this again.

For instance, if you do something like

$.ajax({
  url: ...,
}).done(function( data ) {
  // do something with data
  $('table').tableSort();
});

Upvotes: 1

Related Questions