Have a script to run only after external content has loaded

Question

Before anybody asks, this is not the common question about how to run a script after the page loads or anything like that.

Basically, I have this example (fiddle),

$.getScript("http://platform.linkedin.com/in.js").done(function() {
     alert('hello');   
    });

in which the alert fires right after my click, because it fires when the AJAX call ends. My intention is to have the alert to fire only after that LinkedIn company profile is being shown on the page, so that I can access its elements via jQuery. Anybody knows how to do that or if it is even possible?

Thanks in advance!

Answer 1

Your problem occurs because of what is loaded is another document (another DOM tree, on the iframe). After the end of script load, you must check if this new document is ready.

It is made on these two questions answers:

jQuery .ready in a dynamically inserted iframe

Javascript callback when IFRAME is finished loading?

Answer 2

The docs have a few good tid bits.

var myCallBack = function() {
    alert('hello');   
}


$("#showDiv").click(function(){
    $.getScript("http://platform.linkedin.com/in.js?async=true", function() {
        IN.init({
            onLoad: "myCallBack"
        });
    });
}); 

Answer 3

https://api.jquery.com/jQuery.getScript/

$.getScript( "http://platform.linkedin.com/in.js" )
  .done(function( script, textStatus ) {
    console.log( textStatus );

    // You can start some function that periodically will check the loaded content.
    // Once it is detected stop that event.

  })
  .fail(function( jqxhr, settings, exception ) {
    $( "div.log" ).text( "Triggered ajaxError handler." );
});

And https://developer.linkedin.com/

And I just did some investigation special for you

Here is working code. Enjoy!

<a href="#" id="showDiv">Show Agency</a>
<div id="invisibleDiv">
    <script type="IN/CompanyProfile" data-id="1035" data-format="inline" data-related="false">
    </script>
</div>

<script>
    $(function(){
    $("#showDiv").click(function(){
        $.getScript("http://platform.linkedin.com/in.js").done(function(script, textStatus) {
            if (textStatus == "success")
            {
              console.log( textStatus );
              var intervalID = setInterval(function(){
                  console.log("time + 1000" );
                  if ($('#uploads').contents().find('iframe').contents().find('.company-logo')) {
                      console.log("hello!!!");
                  }
                  else {
                      console.log("wahaat???");
                  };
            }, 1000);

         }
        });
    });
    });
</script>