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!

Use your fiddle to check code of my answer. – NoWar Apr 10 '14 at 19:49 — NoWar, Apr 10 '14 at 19:49

score 2 · Accepted Answer · edited May 23 '17 at 12:13

2

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?

edited May 23 '17 at 12:13

Community

1
1

answered Apr 10 '14 at 19:05

Vitor Tyburski

1,062
13
17

Oh that's right! I missed that while inspecting the elements. Thanks! – lucasnadalutti Apr 10 '14 at 19:15

score 0 · Answer 2 · answered Apr 10 '14 at 19:11

0

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"
        });
    });
});

answered Apr 10 '14 at 19:11

John

417
2
6

Error, myCallBack is not a valid function. I can't seem to get any function to execute in onLoad to test your answer – lucasnadalutti Apr 10 '14 at 19:24
1

Ok just got the alert firing but it has the same problem as mine had: it does not fire after the content has shown up. – lucasnadalutti Apr 10 '14 at 19:26

NoWar · Answer 3 · 2014-04-10T19:35:00.713

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>

Yay, now that was a good idea, although a bit hacky. Problem is that I am trying to do that and the page never finds my class even after the window has showed up. Does the DOM need to be refreshed or something like that? — lucasnadalutti, Apr 10 '14 at 19:02
@lucasnadalutti I just updated my answer. Enjoy! I have used ASP.NET MVC project to test it. — NoWar, Apr 10 '14 at 19:35

Have a script to run only after external content has loaded

3 Answers3