0

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.

Community
  • 1
  • 1
Andrew-ThinkUp
  • 521
  • 1
  • 7
  • 15

2 Answers2

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

Guido Kitzing
  • 892
  • 5
  • 14
  • 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 ` ` and this executes, calling in the markup. Once that occurs, I need to execute my script (Script#2). @Guido – Andrew-ThinkUp Nov 30 '15 at 14:53
  • 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 -Tag. See my other answer for that. – Guido Kitzing Nov 30 '15 at 18:33
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.

Guido Kitzing
  • 892
  • 5
  • 14
  • 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](http://naada.staging.wpengine.com/test-workshop-slider/) 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 . So testing for that's existence was unsuccessful in this case. – Andrew-ThinkUp Dec 01 '15 at 20:07
  • 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 ````. If it is not inside, we probably can assume the widget has loaded. I used jQuery for easier access to the DOM. – Guido Kitzing Dec 01 '15 at 20:24
  • 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-ThinkUp Dec 03 '15 at 16:19
  • But your method worked! @GuidoK Just altered a bit. I know the output loads a set of
    – Andrew-ThinkUp Dec 04 '15 at 21:10