CODEWITHSUNDEEP
javascriptjquerydynamic
Andrew-Sepic
Andrew-Sepic

Reputation: 543

Execute jQuery after Other JS file Dynamically loads content

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.

Upvotes: 0

Views: 994

Answers (2)

Guido Kitzing
Guido Kitzing

Reputation: 892

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.

Upvotes: 1

Guido Kitzing
Guido Kitzing

Reputation: 892

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

Upvotes: 1

Related Questions