When ready state is completed, a JS function would run only one time after clearing cache?

Question

when readyState is completed, some code would be executed but it doesn't work upon chrome browser till clearing the cache then it runs for only one time. If I refresh, That code wouldn't be executed again until clearing the cache again and it runs for only one time again. I have to execute the code when ready state is completed because it runs over a data table that wouldn't be loaded till ready state is completed. I tried executing that same code onDocumnt.ready but It doesn't find the ids of the datatable elements so nothing happened. Here's the code used :

$(document).on("readystatechange", function(e) {
        if (document.readyState == "complete") {
            $(`#salaries-datatable-table`).wrap("<div class='col-12' style='overflow-x:auto'></div>");
            $("#salaries-datatable-table_wrapper .dt-buttons").append(`<button class="btn btn-outline- 
              blue btn_size">OK</button>`);
        }
    });

The result is: For wrapping not only the table would be wrapped but also its container div and for the appending nothing happens except for the first time the code runs after clearing cache the button would be appended and only the table would be wrapped. I hope I could explain it appropriately.

OT - Think you meant cache instead of cash. One is (short term) storage, the other is currency. — phuzi, Sep 22 '21 at 10:48
Yes, I meant cache (Clear browsing data). Sorry for this conflict, I've edited the question — Ayah Almahrouq, Sep 22 '21 at 12:25

Ayah Almahrouq · Answer 1 · 2021-09-26T20:42:24.353

This solution worked for me: After searching, I found that the Event init.dt fires after the data table is initialized, so I didn't need to check if the ready state was completed or not, the on init.dt fired before ready state was completed and its behavior don't differ at mobile devices or for chrome browser and it had no relationship with clearing cache, The code used:

$(`#salaries-datatable-table`).on('init.dt', function() {
      console.log('Table initialisation complete ');
      $(this).wrap("<div class='col-12' style='overflow-x:auto'></div>");
      $(this).find(".dt-buttons").append(`<button class="btn">OK</button>`);
    });

But still, I didn't get what happened when the ready state was completed. Hope someone can explain it.

When ready state is completed, a JS function would run only one time after clearing cache?

1 Answers1