0

How do I check if loading class is no more on the page and enable a button?

right now I check it like below:

if (!($('.loading').length > 0)){

console.log("page loading is done")

}

This doesn't seem to work. It only checks it once and nothing happens as we still have loading class assigned to one of the id's.

Rarblack
  • 4,559
  • 4
  • 22
  • 33
Raj
  • 368
  • 1
  • 5
  • 17
  • Possible duplicate of [How to fire an event on class change using jQuery?](https://stackoverflow.com/questions/19401633/how-to-fire-an-event-on-class-change-using-jquery) – Mohammad Oct 18 '18 at 06:36
  • Can you please share your HTML? – Anki Oct 18 '18 at 06:39

2 Answers2

0

You can use setInterval method of javascript like

setInterval(function(){ 
   if (!($('.loading').length > 0)){
       console.log("page loading is done") 
       clearInterval(interval); 
   }
}, 1000);
Rahul Dudharejiya
  • 355
  • 3
  • 16
0

Clean way is to find a place where .loading class removed and attach your code there (ideally by firing event there and attaching in your code).

Try to search for removeClass('.loading') or just .loading and add your code right there or fire event via 

$(document).trigger('my-event-loaded');

And then

$(document).on('my-event-loaded', function() {
    console.log("page loading is done");
});

There is also a really dirty way - to check it periodically: (AVOID WHEN POSSIBLE)

var interval = setInterval(function() {
    if (!($('.loading').length > 0)) {
        console.log("page loading is done");
        clearInterval(interval); 
    }
}, 500);
WowPress.host
  • 133
  • 1
  • 6
  • I am using loading class for many table in the same form, I want the button to be disabled after all tables are loaded. setInterval worked for now. Thanks for the quick reply and suggestions. These are really helpful. – Raj Oct 18 '18 at 06:56
  • In that case those clear way to do things is to check for .loading presence on event fired after each .loading removal - like you do with setInterval $(document).on('my-event-loaded', function() { if (!($('.loading').length > 0)) { console.log("page loading is done"); } }); – WowPress.host Oct 19 '18 at 09:16