4

I've a problem that is a bit tricky over here, I'm trying to apply a simple JQuery line of code that addClass to a div with class pop-up but the problem is that class pop_up is not accessible after jQuery(document).ready(function($){});

This class is actually added from an external JS and the pop_up functionality is also added from an external JS so I'm wondering

How To Add The Class using JQuery after the external JS get executed so pop_up class can be found using:

$('.pop_up');

What I've tried:

jQuery(document).ready(function($) {
    $('.pop_up').addClass('importantRule');
    $('.pop_up').toggleClass('importantRule');
});

this is not working as the external JS added the class somehow after .ready, so if you tried to print out $('.pop_up') it will be undefined.

I've also tried to look for the class using a constant class container of div.pop_up like this:

$('div.element').find('.pop_up').addClass('importantRule');

that didn't work either, I know for a fact the problem is with calling the function in .ready as some how the external JS get executed after it so,

is there away around this?

if not, is there a way to detect if all of external JS files are ready and loaded?

BenG
  • 14,826
  • 5
  • 45
  • 60
Ahmad Sanie
  • 3,678
  • 2
  • 21
  • 56
  • I believe this approach will work: Use a time out script and do the essential stuff in this script. Then the rest can execute. Also, have a look at [this](http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready). Might help. – Satej S May 10 '16 at 11:54
  • When does this other code add the "pop_up" class? On load or some other time? And which code comes first? – Mario Plantosar May 10 '16 at 11:55
  • Just include your jquery code after you've included the external script – Velimir Tchatchevsky May 10 '16 at 11:55
  • Do you have any access to the external JS? If so, you could trigger an event – pistou May 10 '16 at 12:09

5 Answers5

4

You can have $(document).ready() multiple times in a page. The code gets run in the sequence in which it appears.

You can use the $(window).load() event for your code since this happens after the page is fully loaded and all the code in the various $(document).ready() handlers have finished running.

$(window).load(function(){
  //your code here
});
KiwiJuicer
  • 1,952
  • 14
  • 28
2

One way is to use a setTimeout to check:-

function checkForElement() {

  setTimeout(function() {

    if ($('.pop_up').length) {
      $('.pop_up').addClass('importantRule');
    } else {
      checkForElement();
    }

  }, 100);

}

checkForElement();

This will wait for 100ms, then check. if its not there then it will wait again, and again, etc.

BenG
  • 14,826
  • 5
  • 45
  • 60
  • It's a bit heavy, but it will work. As long as you don't have to wait for too long, it won't cost all that much. – Narxx May 10 '16 at 11:59
1

You experience a race condition. If the external script finishes running first, then your code will work, but if your code finishes first, then it breaks.

You can either hack around it like Satej S suggested on the comments, and give a reasonable timeout which will make sure the external script finished running, and after that timeout, run your script.

setTimeout(function(){ doSomething(); }, 3000);

A better solution will be using a callback from the external script (can you edit the external script?). This way, the second the external script ends, it calls for one of your internal functions that will start working.

Narxx
  • 7,929
  • 5
  • 26
  • 34
  • 1
    np I can't edit the external script even tho your solution is totally accurate but I've to go with $(window).load as it working perfectly in my case. – Ahmad Sanie May 10 '16 at 12:04
  • 1
    I'm not sure this would be a great solution. What if the external JS only takes 500ms? You'll lose 2500ms waiting for nothing. And you can't really calculate the optimal timeout since the external JS may takes different time to process depending on user (pc, internet speed, etc.) – pistou May 10 '16 at 12:07
  • @pistou The 3000 is just an example. Obviously it needs to be adjusted to how long it takes for the external script to load. Could be 500ms, could be 5000ms... The $(window).load is tricky. You might want to further tests edge cases making sure the external script always finishes loading before the window finishes loading. – Narxx May 10 '16 at 13:08
  • I know the 3000 was just an example. My point is that it could take 500ms for some, and 5000 for some others ; depending on lots of thing. I think it would be tricky to find the optimal time. – pistou May 10 '16 at 13:12
  • @pistou yes, you are correct. this is indeed a hack and it's not the best practice. it could work in some cases, under some assumptions, relatively well, but could just as easily break. – Narxx May 10 '16 at 14:23
1

To avoid timeouts that most other answers suggest, I would advise you to try adding "defer" tag to your script include. That way the script trying to add class "importantRule" will wait until all of the other scripts have been loaded and executed.

Mario Plantosar
  • 804
  • 9
  • 24
0

In addition, I found this question quite similar load and execute order of scripts

Hope this helps! Thanks

Community
  • 1
  • 1
ashok93
  • 103
  • 7