1

I need to execute a given javascript function after a part of the page is loaded via AJAX. I have no control over how the page loads so trigerring an event from the page is not an option, I suppose I'll need to check the body for the element I need and execute after this element is exists.

I saw that I could do this using jQuery ".on" method, but my jQuery version is from before this feature was introduced so I can't use it. What's the best way to do this using no third-party libraries?

Here's an example using jQuery:

//bind to the body a "load" handler for elements that have class names of "hello"
$('body').on('load','.hello',function(){
  alert("Hello is fully loaded, proceed with your program logic");
})

PS: related question that I've read before posting this one. How to bind a function to Element loaded via Ajax

Community
  • 1
  • 1
Thiago Moraes
  • 617
  • 1
  • 10
  • 22

1 Answers1

2

You can create a function to call when the elements are loaded, and another function to check if they are loaded at an interval. Then attach the load checking function to the body's onload attribute. For example:

<body onload="checkLoaded()">

<script type="text/javascript">
    var afterLoaded = function() {
        // code to execute once elements are in place
        console.log("Elements loaded.");
    };

    var checkLoaded = function() {
        var interval = setInterval(function() {
            if(document.getElementsByClassName("hello").length) {
                clearInterval(interval);
                afterLoaded();
            }
        }, 1000);
    };
</script>

Plunker

Shelby L Morris
  • 726
  • 5
  • 10
  • It's sorta like this. But isn't this going to be executed only once, when the body finishes loading? I need it to keep checking until the "hello" element is loaded via AJAX. If this keeps checking more than once, it solves my problem. Is this the case? – Thiago Moraes May 14 '14 at 18:00
  • @ThiagoMoraes, if you want something to happen every time this ajax is completed successfully... why not use a callback on the ajax? – Smern May 14 '14 at 18:01
  • @smerny because I don't control the website. I'm just inserting a javascript tag in there without access to anything on their side. Would be a lot easier indeed, but doesn't work in my case :( – Thiago Moraes May 14 '14 at 18:07
  • There's not an extremely efficient way to do what you're asking, but there are ways. You can use the same function I posted, wrap it in a `setInterval()` and when you find the elements you can use `clearInterval()` – Shelby L Morris May 14 '14 at 18:09
  • @sxnine I think I'm going the setInterval way. Doesn't seem too bad considering the limitations that I have in place... – Thiago Moraes May 14 '14 at 18:17
  • @sxnine I used the solution you proposed in your last comment in the end. If you wish to edit the body so I can accept your answer and make it clearer, just do it :) – Thiago Moraes May 14 '14 at 22:14
  • @ThiagoMoraes I've updated the answer with an example and a working Plunker to test with. – Shelby L Morris May 15 '14 at 04:45