Execute jQuery after Other JS file Dynamically loads content

Question

I'm working to modify some content which is dynamically loaded via another script(let's call is script #1) onto my site. Script #1 loads some markup and content and I've been using the setTimeout() function to call my script (Script #2) using a delay of a few seconds, in order to wait to be sure that Script #1 has executed and the content is present in the DOM.

My issue is that Script#1 has different loading times, based on the server load and can be slow or fast depending on these factors, and right now, playing it safe with setTimeout() I'm often left with a second or two where my scripts are still waiting to be fired and Script #1 has already loaded the content.

How can I execute my script as soon as Script#1 successfully loads it's dynamic content?

I've found this post which does seem to address the same issue but using the setInterval function as @Matt Ball has laid out there doesn't work at all for some reason. I'm using the code below where 'div.enrollment' is meant to find in the DOM which is dynamically loaded and execute..

jQuery(window).load(function ($)
  {
      var i = setInterval(function ()
      {
          if ($('div.enrollment').length)
          {
              clearInterval(i);
              // safe to execute your code here
              console.log("It's Loaded");
          }
      }, 100);
  });

Any help on guidance on this would be greatly appreciated! Thanks for your time.

Guido Kitzing · Accepted Answer · 2015-12-01 20:22:18Z

1

It seems that the healcode.js is doing a lot of stuff. There is a whole lot of markup added to the <healcode-widget> tag.

I would try to add another tag with an id inside and test for its existence:

<healcode-widget ....><div id="healCodeLoading"></div></healcode-widget>

Test in an interval for the existence of healCodeLoading inside <healcode-widget>: (Assuming jQuery)

var healCodeLoadingInterval = setInterval(function(){ 
    var healCodeLoading = jQuery('healcode-widget #healCodeLoading');

    if (healCodeLoading.length == 0) {
        clearInterval(healCodeLoadingInterval);

        // Everything should be loaded now, so you can do something here
    }
}, 100);

healcode.js should replace everything inside <healcode-widget></healcode-widget> during init. So, if your <div>-element is no longer inside, the widget has loaded and initialized.

Hope that helps.

edited Dec 1, 2015 at 20:22

answered Nov 30, 2015 at 18:39

Guido Kitzing

8925 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Andrew-Sepic Over a year ago

that's a great tack. I was sorry to see that it didn't work as we hoped though. I think you should be able to see this dev site to check markup if you're so inclined. It seems like healcode.js doesn't clear the div#healCodeLoading, but just displaces it and puts it's outside the <healcode-widget>. So testing for that's existence was unsuccessful in this case.

Guido Kitzing Over a year ago

Okay. But then you could modify the code. I updated my answer. The main difference is, that I now check for the existence of #healCodeLoading INSIDE of <healcode-widget>. If it is not inside, we probably can assume the widget has loaded. I used jQuery for easier access to the DOM.

Andrew-Sepic Over a year ago

thanks for your effort. This doesn't seem to work either. Apparently the script loads part way, (displays a loading image at which point the #healCodeLoading div gets the boot and then takes a few seconds more to load the actual markup. I see another site doing something similar and they are using if(jQuery('.hc_loading_image').length ) in order to see if the loading image is being displayed. I could see further use of this.. I think I'd need to have 2 setInterval functions, one to watch and see when the loading image displays and one to see when it's goes ( markup is loaded).

Andrew-Sepic Over a year ago

But your method worked! @GuidoK Just altered a bit. I know the output loads a set of <div class="enrollment"></div which are the main markup and so I modified the variable healCodeLoading to jQuery('healcode-widget .enrollment') and the if statement to if (healCodeLoading.length !== 0) to determine when that enrollment div exists and has content and it works like a charm. Thank you!

Guido Kitzing · Accepted Answer · 2015-11-25 19:01:13Z

1

If you just want to load some markup and content and then run some script afterwards, you can use jQuery. You should use something like the following in script#1 to run a function in script#2

$.get( "ajax/test.html", function( data ) {
    // Now you can do something with your data and run other script.
    console.log("It's Loaded");
});

The function is called, after ajax/test.html is loaded.

Hope that helps

answered Nov 25, 2015 at 19:01

Guido Kitzing

8925 silver badges15 bronze badges

2 Comments

Andrew-Sepic Over a year ago

thanks for your response. This issue I have is that I don't have control of Script#1. Or at least so I believe. I paste the following code

<script src="https://widgets.healcode.com/javascripts/healcode.js" type="text/javascript"></script>  <healcode-widget data-type="enrollments" data-widget-partner="mb" data-widget-id="301787442aa" data-widget-version="0.1"></healcode-widget>

and this executes, calling in the markup. Once that occurs, I need to execute my script (Script#2). @Guido

Guido Kitzing Over a year ago

I had a look at that code, but there is a lot of stuff going on in healcode.js. I would probably try to see, what is happening inside the <headcode-widget>-Tag. See my other answer for that.

Collectives™ on Stack Overflow

Execute jQuery after Other JS file Dynamically loads content

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related